纯HTML无法实现图片编辑功能，必须依赖canvas+JavaScript；需通过FileReader读取文件、Image对象加载、drawImage绘制到canvas，再用getImageData/putImageData进行像素级滤镜处理，裁剪须用drawImage九参数形式，且CSS filter不影响toDataURL导出结果。
纯 HTML 无法实现图片编辑功能——它只是标记语言，不处理图像数据或用户交互逻辑。真正能做裁剪、旋转、滤镜、涂鸦的，必须靠 canvas + JavaScript，配合 FileReader 和原生 DOM 操作。
用 canvas 读取并显示图片是第一步
用户选中文件后，得先把它转成可绘制的 Image 对象，再画到 canvas 上。跳过这步直接操作 <img> 标签，后续所有编辑（比如像素级修改）都无从谈起。
-
input[type="file"]的change事件里拿到files[0] - 用
FileReader.readAsDataURL()转成 base64 字符串 - 等
load回调触发后，给new Image()的src赋值 - 等
img.onload触发，再调用ctx.drawImage(img, 0, 0)
漏掉任一异步环节（比如在 img.src 设完就立刻画图），canvas 会是空的——这是新手最常卡住的地方。
裁剪和缩放依赖 canvas.getContext('2d').drawImage() 的参数变体
同一个 drawImage() 函数，传 3 个、5 个或 9 个参数，行为完全不同：3 参数是缩放贴图；5 参数是定位+缩放；9 参数才是带源区域裁剪的完整控制。
立即学习“前端免费学习笔记（深入）”；
- 要做「选区裁剪」：必须用 9 参数形式，前 4 个指定图片上哪一块（
sx, sy, sWidth, sHeight），后 4 个指定画到 canvas 哪里（dx, dy, dWidth, dHeight） - 直接改
canvas.width/height会清空内容，想缩放画布得先ctx.scale()或重设尺寸后重绘 - 浏览器对高分辨率图（如手机拍的 4000×3000）可能报
IndexSizeError，得先按比例缩小源图再操作
参数顺序容易记混，建议封装成函数，比如 cropAndDraw(img, sx, sy, sw, sh, dx, dy, dw, dh)，避免每次手写 9 个变量。
滤镜效果靠 ctx.getImageData() + 像素遍历，别碰 filter CSS 属性
canvas 元素上加 style="filter: brightness(1.2)" 看似简单，但它只是视觉叠加，导出的图片（toDataURL()）不会包含该效果——导出的是原始像素数据。
- 要用
ctx.getImageData(0, 0, width, height)拿到Uint8ClampedArray像素数组 - 每个像素占 4 字节（R、G、B、A），索引是
i = (y * width + x) * 4 - 灰度化：取
0.299*r + 0.587*g + 0.114*b；反色：用255 - r等 - 改完必须调
ctx.putImageData()才生效，漏掉这句画面不变
大图遍历慢（比如 2000×1500 就要处理 1200 万字节），可考虑用 Worker 搬到后台线程，但简单编辑器先用 requestIdleCallback 防卡顿更实际。
真正难的不是写几行 drawImage，而是状态管理：用户拖拽选区时坐标怎么算、撤销栈怎么存历史 canvas 快照、导出前要不要自动压缩。这些没标准答案，得根据你要支持的功能边界来权衡——比如只做裁剪，就不用管滤镜内存；要做图层，canvas 就得拆成多个。
