简易抠图换色需先设img.crossorigin="anonymous"并等加载完成再绘至canvas；点击取色后按欧氏距离≤容差判定目标像素，忽略alpha值，批量替换为透明或新色。

用 Canvas 像素颜色替换算法实现简易抠图换色，核心是“识别目标色 → 设为透明或替换成新色 → 保留非目标区域”，不依赖后端、纯前端运行。关键不在暴力遍历，而在合理判定和安全覆盖。

一、加载图片并解决跨域问题

必须确保 getImageData 可正常读取像素，否则会报 SecurityError：

• 给 <img> 设置 crossOrigin="anonymous" 属性（图片需支持 CORS）
• 等图片完全加载（img.onload）后再绘制到 canvas
• canvas 尺寸设为 img.naturalWidth / naturalHeight，避免缩放失真导致颜色偏移

二、点击取色 + 定义容差范围

用户点击图像某点，获取该位置原始颜色作为“待替换色”：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 监听 canvas 的 click 事件，用 e.offsetX / offsetY 或 getBoundingClientRect() 换算坐标
• 调用 ctx.getImageData(x, y, 1, 1) 得到 [R, G, B, A] 数组
• 设定容差值（如 30～50），后续比对用欧氏距离：√[(r1−r2)²+(g1−g2)²+(b1−b2)²] ≤ tolerance
• 建议忽略 alpha

三、批量替换像素并写回画布

遍历整个像素数组，对匹配区域做统一处理：

• 用 ctx.getImageData(0, 0, width, height) 获取全部像素数据
• 循环步长为 4，每次取 data[i]（R）、data[i+1]（G）、data[i+2]（B）
• 若满足颜色相近条件，可选择：
  • 设为透明：data[i+3] = 0（适合换背景）
  • 直接替换为新色：data[i]=r2; data[i+1]=g2; data[i+2]=b2（适合局部着色）
• 处理完后调用 ctx.putImageData(imageData, 0, 0) 写回原画布

四、提升可用性的细节补充

让工具更接近真实使用场景：

• 加一个“吸管”光标样式：canvas.style.cursor = 'crosshair'
• 点击后高亮显示当前选中色块（如小圆点+边框），增强反馈
• 支持手动输入容差值和目标色，方便精细调整
• 移动端需将 touchstart 的 touches[0].clientX 转为 canvas 坐标
• 大图建议跳点采样（如每 2 像素取 1 点）或限制处理区域，防卡顿

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！