html5画布：按颜色剪裁 [英] html5 canvas: clipping by color

问题描述

有没有办法按颜色选择画布上的区域并剪辑它？
我希望能够剪切一个未定义的aread，所有像素之间唯一的共同点是它们都具有相同的颜色。
谢谢

is there any way to choose an area on the canvas by color and clip it? I want to be able to clip an undefined aread that the only thing in common between all the pixels is that they all have the same color. thanks

推荐答案

现场演示

Live Demo

下面是一种选择颜色的方法..并做任何你想做的事情它。我传递一种颜色，我希望在每个像素上找到迭代并删除匹配的颜色，因为我不确定你的意思是剪切我认为你的意思是删除。但是请注意大图像这个方法会很慢。

Below is a way to select a color.. and do whatever you want with it. I pass a color I want to find iterate over every pixel and remove the color that matches, since Im not sure what you meant by clipping I assumed you mean remove. However please note on large images this method will be slow.

// 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一样指出上面的代码将获得完全颜色。下面将获取近似颜色，如果你的颜色重叠或彼此非常接近，那就很好。

And like Simon pointed out the code above will get the exact color. Below will grab the approximate color, which is good if you have colors overlapping or very close to each other.

演示2近似值

Demo 2 with approximation

这篇关于html5画布：按颜色剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！