html5画布：按颜色剪裁

Posted 2023-02-25

【中文标题】html5画布：按颜色剪裁

【英文标题】：html5 canvas: clipping by color

【发布时间】：2011-09-08 13:13:12

【问题描述】：

有什么方法可以通过颜色在画布上选择一个区域并对其进行剪辑？ 我希望能够剪辑一个未定义的区域，所有像素之间唯一的共同点是它们都具有相同的颜色。 谢谢

【问题讨论】：

clip 是什么意思？

【参考方案1】：

Live Demo

下面是一种选择颜色的方法......并随心所欲地使用它。我传递了一种我想查找的颜色，遍历 每个 像素并删除匹配的颜色，因为我不确定你所说的裁剪是什么意思，我假设你的意思是删除。但是请注意，对于大图像，这种方法会很慢。

// Takes an array with 3 color components, rgb     
function removeColor(color)
    var canvasData = ctx.getImageData(0, 0, 256, 256),
        pix = canvasData.data;

    for (var i = 0, n = pix.length; i <n; i += 4) 
        if(pix[i] === color[0] && pix[i+1] === color[1] && pix[i+2] === color[2])
             pix[i+3] = 0;   
        
    

    ctx.putImageData(canvasData, 0, 0);


removeColor([0,0,255]); // Removes blue.

就像 Simon 指出的那样，上面的代码将得到 exact 颜色。下面将抓取近似颜色，如果颜色重叠或彼此非常接近，这很好。

Demo 2 with approximation

【讨论】：

除非有问题的图像是像素完美的，否则可能值得近似你的条件，即使是大量的：jsfiddle.net/CqTEV/9

@SimonSarris 是的，我也考虑过这一点，我注意到由于颜色渗色和准确值丢失，我没有选择边缘。我会把你的 js fiddle 添加到答案中并给你信用。

@Loktar 也谢谢你 :-)