Cropper 图片裁剪

全端高性能图片裁剪组件，支持手势缩放、拖拽平移、90°旋转与还原，兼容正方形与圆形头像裁剪蒙版，支持移动端双指与 PC 端鼠标滚轮及拖拽操作。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <view>
    <mu-button type="primary" @click="showCropper = true">选取图片裁剪</mu-button>

    <!-- 裁剪窗口 -->
    <mu-cropper
      v-model:show="showCropper"
      src="https://picsum.photos/600/600"
      :width="260"
      :height="260"
      @confirm="onConfirm"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showCropper = ref(false)

function onConfirm({ url, blob }) {
  console.log('裁剪完成生成临时地址:', url)
}
</script>

---

2. 圆形头像裁剪 (Circle Shape)

设置 shape="circle" 展示圆形头像裁剪蒙版框。

<template>
  <mu-cropper
    v-model:show="showCropper"
    src="/static/avatar.jpg"
    shape="circle"
    :width="240"
    :height="240"
    @confirm="onAvatarCrop"
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制裁剪界面显隐	Boolean	true | false	false
src	待裁剪图片地址（本地路径或网络 URL）	String	-	''
width	裁剪框宽度 (px)	Number	-	300
height	裁剪框高度 (px)	Number	-	300
shape	裁剪框形状	String	square (矩形) | circle (圆形)	'square'
quality	导出图片清晰度 (0 ~ 1)	Number	-	0.9

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
confirm	点击确定完成裁剪时触发	(res: { url: string, blob?: Blob })
cancel	点击取消或关闭界面时触发	-