Maofeng
38 lines
827 B
Plaintext
38 lines
827 B
Plaintext
---
|
|
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, 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}>
|
|
Save avatar
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|