simple-react-app-kit/packages/cropper/docs/zh-Hans/examples/avatar-crop.mdx

---
title: 头像裁剪
description: 创建圆形头像预览并导出固定尺寸的 PNG。
order: 30
toc:
  - id: example
    title: 示例
---

## 示例 {#example}

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

function AvatarCropper({ src }: { src: string }) {
  const cropperRef = React.useRef<CropperHandle>(null)

  async function saveAvatar() {
    const blob = await cropperRef.current?.getCropImage({
      height: 512,
      shape: "circle",
      type: "image/png",
      width: 512,
    })
    if (blob instanceof Blob) await uploadAvatar(blob)
  }

  return (
    <div className="space-y-4">
      <Cropper ref={cropperRef} src={src} shape="circle" className="size-72" />
      <button type="button" onClick={saveAvatar}>
        保存头像
      </button>
    </div>
  )
}
```