vue3图片裁剪组件

1、安装

pnpm install @toowe/imagecropper

2、定义传输实体和对应的处理器

import { ImageCropper } from '@toowe/imagecropper';

<ImageCropper :file="file" @done="finish" @preview="preview" :width="200" :height="200"></ImageCropper>

3、参数

| 参数名 | 类型 | 说明 | 是否必填 | 默认值 | | ------ | ------ | ---------------- | -------- | ------ | | file | File | 图片文件 | 是 | 无 | | width | number | 裁剪宽度(单位px) | 否 | 100 | | height | number | 裁剪高度(单位px) | 否 | 100 |

4、事件

function done(data: Blob) {
  console.log('final image data:', data)
}

function preview(html: string) {
  previewDiv.innerHTML = html;
}