pnpm-vue3-ts：裁剪 / 上传裁剪 / 头像-商品图片处理-图片编辑 / vue-cropper

一、简介

Vue-Cropper 是一个基于 Vue.js 的轻量级图片裁剪组件，专为前端项目中的图片裁剪需求设计。它提供了丰富的功能和灵活的配置选项，支持多种图片格式输入和输出，适用于头像裁剪、商品图片处理、图片编辑等场景。

二、使用场景

用户头像上传：允许用户裁剪并上传符合要求的头像。

商品图片处理：电商平台中，用户可裁剪商品主图或详情图。

图片编辑工具：集成到图片编辑器中，提供基础裁剪功能。

三、集成 vue-cropper 插件

pnpm install vue-cropper@next

main.ts

import VueCropper from 'vue-cropper' // 图片裁剪

app.use(VueCropper) // 图片裁剪

四、封装组件

技术栈：pnpm、vue3、typescript、vue-cropper

五、父组件调用

六、Vue-Cropper 部分核心配置项

配置项	说明	默认值	可选值
img	图片源，支持 URL、base64 或 blob 格式	null	URL/base64/blob
outputSize	输出图片质量	1	0.1 - 1
outputType	输出图片格式	'jpeg'	'jpeg'、'png'、'webp'
autoCrop	是否自动生成裁剪框	false	true、false
autoCropWidth	裁剪框宽度	父容器的 80%	数值
autoCropHeight	裁剪框高度	父容器的 80%	数值
fixed	是否固定宽高比	true	true、false
fixedNumber	宽高比例	[1, 1]	[width, height]
canScale	是否允许缩放图片	true	true、false
canMove	是否允许移动图片	true	true、false
canMoveBox	是否允许移动裁剪框	true	true、false
fixedBox	是否固定裁剪框大小	false	true、false
mode	图片渲染模式	'contain'	'contain'、'cover' 等
enlarge	输出放大倍数	1	数值
centerBox	是否限制裁剪框在图片内	false	true、false
info	是否显示裁剪框的大小信息	false	true、false
full	是否输出原图比例截图	false	true、false
original	上传图片是否显示原始宽高	false	true、false
maxImgSize	限制图片最大尺寸，避免移动端内存问题	无	数值（单位：像素）
enableExif	是否自动处理 EXIF 方向信息（旧版浏览器）	true	true、false
high	是否开启高清模式	false	true、false
crossOrigin	图片跨域属性	null	'Anonymous'、'Use-Credentials' 等
checkCrossOrigin	是否检查跨域	true	true、false

七、Vue-Cropper 的部分核心事件

事件名	说明	触发时机
@realTime	实时预览事件，在裁剪框移动或缩放时触发	裁剪框位置或大小变化时
@imgLoad	图片加载完成事件	图片成功加载到裁剪组件后
@cropMove	裁剪框移动事件	裁剪框在图片上移动时
@cropMoving	裁剪框移动中事件（持续触发）	裁剪框移动过程中持续触发
@zoom	图片缩放事件	图片被缩放时
@crop	裁剪完成事件（部分版本可能支持）	裁剪操作完成时（需结合具体版本）
@mouseMove.native	鼠标移动事件（需结合原生事件修饰符，非插件内置但常用）	鼠标在裁剪区域移动时
@mouseUp.native	鼠标释放事件（需结合原生事件修饰符，非插件内置但用于结束裁剪交互）	鼠标在裁剪区域释放时

八、 欢迎交流指正