更新记录

1.0.0（2026-06-09）

1.0.0

支持自定义裁剪比例、拖拽缩放调整画面

平台兼容性

uni-app(5.07)

uni-image-cropper-plugin

基于 uni-app + Vue 3 的图片裁剪插件示例。组件支持小程序和 App 常用的图片选择、固定比例裁剪、Canvas 导出临时文件路径。

支持比例

• 1:1
• 4:3
• 16:9
• 3:4
• 9:16
• 3:2
• 2:3

运行

npm install
npm run dev:h5
npm run dev:mp-weixin
npm run dev:app

使用

<template>
  <una-image-cropper
    v-model:src="imagePath"
    default-ratio="1:1"
    :output-width="1080"
    @crop="handleCrop"
  />
</template>

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

const imagePath = ref('')

function handleCrop(result) {
  console.log(result.tempFilePath)
}
</script>

Props

Events

暴露方法

通过 ref 可调用：

• chooseImage()：打开选择图片。
• crop()：执行裁剪。
• reset()：重置裁剪框。