h5页面图片上传前在线裁剪与旋转纯前端实现，核心是canvas图像处理：1. filereader读取文件为data url并加载image；2. canvas通过ctx.rotate/scale变换预览；3. drawimage截取裁剪区域并toblob导出；4. 需适配移动端、压缩大图、动态调整canvas尺寸。
在 H5 页面中实现图片上传前的在线裁剪与旋转，核心是利用 Canvas 进行图像处理，配合原生 <input type="file"> 获取图片文件，再通过 JavaScript 控制绘制、变换和导出。整个过程不依赖后端，纯前端完成，兼容现代移动端和桌面浏览器（iOS Safari、Chrome、Edge 均支持）。
1. 选择图片并读取为可操作的图像对象
用户选择文件后，需用 FileReader 将其转为 data URL，再创建 Image 实例加载。这是后续 Canvas 操作的前提。
- 监听
input[type=file]的change事件 - 检查文件类型是否为图片（如
image/jpeg、image/png） - 用
FileReader.readAsDataURL(file)读取，避免跨域问题（本地文件无跨域限制） -
Image.onload触发后，才可安全绘制到 Canvas 上
2. 在 Canvas 中渲染并支持旋转与缩放
创建一个 <canvas></canvas> 用于显示预览和操作。旋转和缩放本质是对 Canvas 绘图上下文做变换，而非修改原始图像数据。
- 使用
ctx.save()/ctx.restore()隔离变换状态 - 旋转：调用
ctx.rotate(angleInRadians)，注意先translate到旋转中心（如画布中心） - 缩放：用
ctx.scale(scaleX, scaleY)，通常等比缩放更直观 - 每次重绘前清空画布（
ctx.clearRect(0, 0, canvas.width, canvas.height)），再按当前参数重新绘制
3. 实现简单裁剪（矩形选区 + 导出裁剪区域）
裁剪不需要复杂 UI 框架，可用固定比例的拖拽选框或预设尺寸按钮（如头像 1:1、证件照 4:3）。关键在计算裁剪坐标并用 ctx.drawImage() 提取子区域。
- 定义裁剪区域：例如居中、宽高各占画布 80%，或允许用户拖动调整（需监听 mouse/touch 事件）
- 导出时，用
ctx.getImageData(x, y, width, height)获取像素数据，再用另一个 canvas 绘制成新图 - 更高效方式：新建 canvas（目标尺寸），调用
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)直接“截取+缩放到新画布” - 最终用
canvas.toBlob(callback, type, quality)得到裁剪后的 Blob，可用于上传或预览
4. 注意事项与优化建议
移动端适配和性能容易被忽略，但直接影响体验。
- 图片过大时（如 iPhone 拍摄 4000×3000），先用
URL.createObjectURL(file)预览，再按需压缩绘制（如最大边缩至 1200px） - 旋转后宽高互换，Canvas 尺寸需动态调整（例如旋转 90° 后，
canvas.width = img.height） - 避免频繁重绘：只在用户松手或确认操作后才生成最终图像，拖拽过程可用 CSS transform 模拟，减少 Canvas 计算
- 部分安卓 WebView 对
toBlob支持不佳，可降级用toDataURL（注意 base64 体积增大）
不复杂但容易忽略细节。只要理清“读取 → 渲染 → 变换 → 截取 → 导出”这条链路，就能做出轻量可靠的前端图片处理功能。
