Canvas局部色彩替换需点选取色+容差匹配+蒙版约束：先用getImageData获取点击色，遍历像素按欧氏距离判断相似性并替换；通过离屏canvas保护源图提升性能；结合灰度蒙版（白允替、黑禁替）控制区域，并辅以边缘羽化实现自然过渡。
Canvas 实现图像的局部色彩替换与蒙版处理，核心在于像素级控制与区域约束。不是简单整图换色，而是“点选颜色 + 容差匹配 + 区域限制”，再叠加蒙版逻辑（如形状裁剪、边缘羽化、透明度过渡），才能真正达到可控、自然的视觉效果。
点击取色 + 容差匹配实现局部换色
用户在 canvas 上点击某一点，程序需实时获取该坐标处的 RGBA 值，并以此为基准，遍历整图像素，判断是否属于“相似色”。关键不是精确相等，而是引入容差（tolerance）——即允许 RGB 各通道存在一定浮动范围。
- 用 ctx.getImageData(x, y, 1, 1) 获取点击点颜色，得到
[r, g, b, a] - 遍历整个
imageData.data数组，每 4 个值为一组（RGBA） - 计算当前像素与目标色的欧氏距离：
Math.sqrt((r1−r2)² + (g1−g2)² + (b1−b2)²) - 若距离 ≤ 容差阈值（如 30），则替换为新颜色；a 值可保留原透明度，或统一设为 255
用离屏 canvas 实现安全高效的像素操作
直接在主 canvas 上反复调用 getImageData 和 putImageData 是可行的，但若后续要叠加蒙版或做多次编辑，建议把原始图像先绘制到一个隐藏的离屏 canvas 中。这样既能保护源数据，又能避免主画布重绘抖动。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 创建离屏 canvas：
const offscreen = document.createElement('canvas') - 设置其宽高与原图一致，并用
offscreenCtx.drawImage(img, 0, 0)绘制原始图像 - 所有像素读取、修改、写入操作都在离屏 canvas 上进行
- 最终只调用一次
mainCtx.putImageData(...)渲染结果，性能更稳
结合蒙版实现区域限定替换
纯色替换常出现“溢出”问题——比如想只换衣服颜色，结果背景也被连带替换了。这时需要蒙版来圈定作用区域。Canvas 本身不提供图形蒙版 API，但可通过 globalCompositeOperation 或 alpha 通道模拟。
- 预先绘制一个灰度蒙版图：白色区域表示“允许替换”，黑色表示“禁止替换”，灰色为半透过渡区
- 在替换循环中，根据当前像素坐标查蒙版图对应位置的 alpha 值（即亮度值）
- 仅当蒙版 alpha > 0.5 时才执行颜色替换，否则跳过
- 也可用
ctx.globalCompositeOperation = 'destination-in'将替换后图像与蒙版图合成，实现硬边裁剪
边缘柔化与抗锯齿处理
直接替换容易产生生硬边界，尤其在容差较大时。可在替换完成后，对结果图像做轻量级后处理：
- 对已替换区域的边缘像素，按邻域均值模糊 1–2 像素（可用简单 box blur）
- 或在蒙版羽化阶段，用 CSS
filter: blur(1px)预处理蒙版图，再参与 alpha 判断 - 避免使用高斯模糊等重型算法，防止主线程阻塞；小范围迭代即可明显改善观感
