---
title: Avatar crop
description: Build a circular avatar preview and export a fixed-size PNG.
order: 30
toc:
  - id: example
    title: Example
---

## Example {#example}

```tsx
import { Cropper, cropImage, type CropArea } from "@workspace/cropper"

function AvatarCropper({ src }: { src: string }) {
  const [area, setArea] = React.useState<CropArea>()

  async function saveAvatar() {
    if (!area) return
    const blob = await cropImage(src, area, {
      height: 512,
      shape: "circle",
      type: "image/png",
      width: 512,
    })
    await uploadAvatar(blob)
  }

  return (
    <div className="space-y-4">
      <Cropper
        src={src}
        shape="circle"
        className="size-72"
        onCropAreaChange={setArea}
      />
      <button type="button" disabled={!area} onClick={saveAvatar}>
        Save avatar
      </button>
    </div>
  )
}
```