feat(cropper): expand image export API
This commit is contained in:
@@ -21,7 +21,7 @@ toc:
|
||||
|
||||
## 裁剪器 {#cropper}
|
||||
|
||||
组件需要明确的宽度,`aspectRatio` 会确定高度:
|
||||
可以使用 class,也可以直接传入 `width`、`height`。`aspectRatio` 接受数字或 `"宽:高"` 字符串:
|
||||
|
||||
```tsx
|
||||
import { Cropper, type CropArea } from "@workspace/cropper"
|
||||
@@ -33,7 +33,7 @@ function ProductImageCropper({ src }: { src: string }) {
|
||||
<Cropper
|
||||
src={src}
|
||||
alt="商品图片"
|
||||
aspectRatio={4 / 3}
|
||||
aspectRatio="4:3"
|
||||
className="w-full max-w-xl rounded-xl"
|
||||
onCropAreaChange={setArea}
|
||||
/>
|
||||
@@ -43,6 +43,8 @@ function ProductImageCropper({ src }: { src: string }) {
|
||||
|
||||
用户可以拖拽图片、滚动缩放,或者在 Cropper 聚焦时使用方向键、`+`、`-`、`0` 和 `Home`。
|
||||
|
||||
`src` 也可以直接传入文件选择器获得的 `Blob` 或 `File`。组件会创建临时 object URL,并在图片改变或卸载时自动释放。
|
||||
|
||||
## 外部控件 {#controls}
|
||||
|
||||
通过 `value` 和 `onValueChange` 控制裁剪状态,即可接入 Slider 或重置按钮。`minZoom` 最小为 `1`,保证图片始终覆盖整个视口。
|
||||
通过 `value` 和 `onValueChange` 控制裁剪状态,即可接入 Slider。快速重置可以直接调用组件 ref 的 `reset()`;`minZoom` 最小为 `1`,保证图片始终覆盖整个视口。
|
||||
|
||||
Reference in New Issue
Block a user