44 lines
875 B
Plaintext
44 lines
875 B
Plaintext
|
---
|
||
|
|
title: 头像裁剪
|
||
|
|
description: 创建圆形头像预览并导出固定尺寸的 PNG。
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: example
|
||
|
|
title: 示例
|
||
|
|
---
|
||
|
|
|
||
|
|
## 示例 {#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}>
|
||
|
|
保存头像
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|