在线照片修图器基于HTML5文件与媒体API实现纯前端处理：用户选图→预览→编辑→导出全程不上传；核心用FileReader转Data URL预览，canvas处理灰度、旋转、裁剪，toBlob下载，适配移动端触控与摄像头。
用 HTML5 文件与媒体 API 构建在线照片修图器，核心是把图片处理全程留在浏览器端——不上传、不依赖后端，用户选图→预览→编辑→导出，一气呵成。
文件读取与本地预览
靠 FileReader 把用户选的图片转成 Data URL，直接喂给 <img> 显示。关键点有三个：
- 用
accept="image/*"限制输入类型，避免非图文件干扰流程 - 读取前检查
file.type.startsWith('image/')，防止 MIME 类型伪造 - 大图（比如 >4000px 宽）做等比缩放再绘制到 canvas，防内存溢出或渲染卡顿
Canvas 图像处理基础操作
canvas 是修图器的“工作台”，所有编辑都基于它完成：
- 灰度化：获取
ctx.getImageData()，遍历像素，按0.299*R + 0.587*G + 0.114*B计算亮度值统一赋给 RGB - 旋转：调用
ctx.translate()和ctx.rotate()配合重绘，注意先保存/恢复坐标系避免累积误差 - 裁剪：定义区域
{x, y, width, height}，用drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)提取并重绘到新 canvas
实时预览与一键下载
编辑结果必须立刻可见，并方便保存：
立即学习“前端免费学习笔记（深入）”；
- 每次处理完，调用
canvas.toDataURL('image/png', 0.9)生成带质量压缩的 base64 字符串，赋给预览<img>的src - 下载时优先用
canvas.toBlob()生成 Blob，再用URL.createObjectURL(blob)创建链接——比纯 data URL 兼容性更好，尤其在 Safari 中稳定 - 创建临时
<a>标签，设href和download="edited.png"，再触发a.click()
移动端与体验细节
手机用户占比高，不能只考虑桌面：
- 拍照直传：用
navigator.mediaDevices.getUserMedia({video: true})调起摄像头，canvas.captureStream().getVideoTracks()[0]可截图，或监听video元素帧数据 - 触控适配：裁剪框拖拽需监听
touchstart/touchmove/touchend，并换算touches[0].clientX到 canvas 坐标 - 加载反馈：文件读取中显示 loading 指示器，按钮置灰防重复提交；处理耗时操作（如滤镜）加节流或禁用交互
