html5画布:按颜色剪裁

时间:2011-09-08 13:13:13

标签: html5 canvas pixel clip

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

1 个答案:

答案 0 :(得分:4)

<强> 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.

就像西蒙指出的那样,上面的代码将获得完全颜色。下面将获取近似颜色,如果颜色重叠或彼此非常接近,这是很好的。

<强> Demo 2 with approximation