Javascript HTML5画布|替换颜色|删除颜色

创建复制此图像而不使用绿色、使绿色透明或从左上角100X100 px移除绿色的最快方法是什么

在这种情况下，我必须检查每个像素值吗？ 此过程太慢，例如：对于100X100px，检查所有rgba值需要40000个循环

---

在支持svg的浏览器中，您可以使用svg过滤器：

这是一个有趣的方法，可以在固定颜色下实现这一点

在这里，我制作了一个简单的帮助函数，它将为我们设置所需的

tableValues

，带有一点容差，并且我删除了

，因此所选的颜色变得透明（

会污染Chrome中的画布）。 如果希望替换颜色，仍然可以使用画布的合成选项（下面代码段中的注释代码）来实现

const ctx=canvas.getContext（'2d'）；
const img=新图像（）；
img.onload=e=>{
canvas.width=img.width；
canvas.height=img.height；
//更新我们的过滤器
updateChroma（[76237,0,8]）；
//如果您希望替换颜色，请取消对以下内容的注释
//ctx.fillStyle=“您的颜色”；
//ctx.fillRect（0,0，img.宽度，img.高度）；
ctx.filter='url（#色度）'；
ctx.drawImage（img，0,0）；
ctx.filter='none'；
//ctx.globalCompositeOperation='destination in'；
//ctx.drawImage（img，0,0）；
};
img.src=”https://i.stack.imgur.com/hZm8o.png";
函数updateChroma（rgb，公差）{
常量sels=['R'，'G'，'B']；
rgb.forEach（（值，ind）=>{
const fe=document.querySelector（“#chroma feFunc”+sels[ind]）；
设VAL=''；
如果（！值）{
VAL='0'
}否则{
for（设i=0；i<256；i++）{
VAL+=（数学绝对值（值-i）如果你检查每个像素值并删除绿色，你会看到一个有洞的丑陋图像。一个更简单的方法是提前计划，效果更好。这是用画布生成的。绘制图像时，你可以将每个圆保存在一个数组中，然后在排除绿色圆后重新绘制所有内容

在下一个示例中，单击颜色进行选择，或单击D删除绿色圆圈


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=canvas.width=300，
cx=cw/2；
var ch=canvas.height=180，
cy=ch/2；
var color=“蓝色”；
var绘图=错误；
var点=[]；
类点{
构造函数（颜色、x、y）{
这个颜色=颜色；
这个.x=x；
这个。y=y
}
画（）{
ctx.fillStyle=this.color；
ctx.beginPath（）；
ctx.arc（this.x，this.y，5,0,2*Math.PI）；
ctx.fill（）
}
}
canvas.addEventListener（'mousedown'，函数（evt）{
绘图=真；
}，假）；
canvas.addEventListener（'mouseup'，函数（evt）{
图纸=假；
}，假）；
canvas.addEventListener（“mouseout”，函数（evt）{
图纸=假；
}，假）；
canvas.addEventListener（“mousemove”，函数（evt）{
if（图纸）{
ctx.clearRect（0，0，cw，ch）；
m=oMousePos（画布，evt）；
var点=新点（颜色，m.x，m.y）；
//point.draw（）；
点。推（点）；
积分.forEach（（p）=>{
p、 画（）
})
}
}，假）；
功能oMousePos（画布、evt）{
var ClientRect=canvas.getBoundingClientRect（）；
返回{
x:Math.round（evt.clientX-ClientRect.left），
y:Math.round（evt.clientY-ClientRect.top）
}
}
colors.addEventListener（“单击”，（e）=>{
如果（e.target.tagName==“SPAN”）{color=e.target.id；
}否则如果（e.target.id==“deleteGreen”）{
ctx.clearRect（0,0，cw，ch）；
积分。forEach（p=>{
如果（p.color！=“绿色”）{p.draw（）}
})
}
})
正文{
背景色：#eee；
}
#应用程序{
显示：块；
保证金：自动；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：300px；
高度：300px；
}
帆布{
背景：#fff；
边界半径：3px；
盒影：0px 0px 15px 3px#ccc；
光标：指针；
}
#颜色{
显示器：flex；
边缘顶部：1米；
证明内容：之间的空间；
}
#颜色跨度，#绿色{
显示：块；
宽度：50px；
高度：50px；
边框：1px实心#d9d9d9；
}
#绿色的{
背景颜色：绿色；
}
#黄金{
背景颜色：金色；
}
#西红柿{
背景色：番茄；
}
#蓝色的{
背景颜色：蓝色；
}
#删除绿色{
文本对齐：居中；
线高：50px；
}

:( 
D
不知道为什么要检查rgba的alpha通道。有没有办法通过hsl获得像素颜色，特别是其色调值？这只是一个例子，即使我们只检查rgb值，也需要花费30000美元。请更详细地解释您想要达到的效果，并显示您尝试过的代码。目前很难想象会发生什么您希望图像在完成操作后看起来像。如果您检查每个像素值并删除绿色，您将看到一个带孔的丑陋图像。一种更简单的方法是提前计划，效果更好。这是使用画布生成的。绘制图像时，您可以将每个圆保存在一个数组中，然后重新绘制每一个圆排除绿色圆圈后为ng。似乎通道（rgb）在此基础上独立过滤，因此，例如，如果我要删除黑色[1,1,1]，则红色[255,1,1]也将被删除，因为绿色和蓝色值是匹配的。纯黑色[0,0,0]也不起作用