UniApp 多端图片裁剪工具 (Vue2 / SFC)
下载地址：https://ext.dcloud.net.cn/plugin?id=26841
1. 简介 (Introduction)
这是一个基于 Vue 2 (Options API) 和 UniApp 原生组件 开发的轻量级图片裁剪工具。
核心目标是解决移动端图片裁剪中常见的性能卡顿、旋转后坐标错乱以及多端兼容性问题（特别是安卓、iOS、微信小程序之间的 Canvas 差异）。
2. 核心特性 (Features)
- 极致性能：使用 movable-area 和 movable-view 原生组件实现图片的拖拽与双指缩放，避开了 JS 频繁通信导致的视图层卡顿。
- 多端兼容：完美适配 Android (10.0+)、iOS (12.0+)、H5 及 微信小程序。
- 旋转裁剪：支持每次 90° 旋转，并内置了复杂的坐标系映射算法，确保旋转后的裁剪结果与预览完全一致。
- 视觉适配：
- 自动适配 暗黑模式 (Dark Mode)。
- 适配 Pad / 宽屏设备（限制最大宽度）。
- 主色调：#EF3912。
- 零依赖：纯原生 API 实现，不依赖 jQuery、Cropper.js 等第三方库，包体积极小。
3. 技术栈 (Tech Stack)
- 框架：UniApp / Vue 2.x
- API：Options API (data, methods, lifecycle)
- 语言：JavaScript (ES6+)
- 样式：CSS / Flexbox / CSS Variables
4. 快速开始 (Quick Start)
4.1 安装
由于是单文件组件，无需 npm 安装。只需将核心文件复制到项目中：
/pages
└─ index
└─ index.vue <— 将代码粘贴到此处
4.2 注册页面
在 pages.json 中添加页面配置：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "图片裁剪",
"navigationStyle": "custom" // 建议使用自定义导航或隐藏原生导航
}
}
]
}
5. 核心逻辑与实现原理
5.1 交互架构
- 视图层：利用 movable-view 处理手势（Pan/Pinch）。
- 预览层：利用 CSS transform: rotate(90deg) 实现低成本的视觉旋转预览。
- 逻辑层：不实时操作 Canvas，仅在点击“确定”时进行一次性绘制。
5.2 坐标系映射 (核心算法)
当用户旋转图片后，屏幕坐标系（Screen Coords）与 Canvas 内部坐标系（Canvas Coords）会发生偏转。 本插件在 onConfirm 阶段实现了以下映射逻辑：
- 例如 90度时：Screen X+ 映射为 Canvas Y-
5.3 兼容性处理
- 微信小程序：使用 canvas-id 属性，并在 uni.createCanvasContext 时传入 this 实例，确保组件化后的上下文获取正确。
- Android：在 ctx.draw() 回调中加入 setTimeout(200ms)，解决部分安卓机型 Canvas 指令下发后未渲染完成就导出导致图片空白的问题。
- H5：使用 uni.canvasToTempFilePath 的标准实现。
6. 参数配置 (Configuration)
目前参数为内部 data 配置，可根据需求提取为 props。
| cropSize | Number | 屏幕宽度的80% | 裁剪框的大小（正方形），最大限制 400px |
| scale-min | Number | 0.5 | 最小缩放倍数 |
| scale-max | Number | 4 | 最大缩放倍数 |
| destWidth | Number | cropSize | 输出图片的宽度（可设为 cropSize * pixelRatio 提高清晰度） |
7. 目录结构示例
├── pages
│ └── index
│ └── index.vue # 核心代码文件
├── static
│ └── …
├── App.vue
├── main.js
├── manifest.json
└── pages.json
8. 注意事项 (Notes)
下载地址：https://ext.dcloud.net.cn/plugin?id=26841
