如何在html5和javascript中编辑像素并删除画布图像中的白色背景

Question

如果我加载一个图像,我怎么能遍历它的所有像素并将白色像素(或我指定的颜色)转为透明？

我知道如何做到这一点,但循环过程应该像2d数组,所以它将涉及两个for循环.

我想我会从顶行第一个像素开始,向右迭代,如果它是一个白色像素,然后我把它变成透明,向右移动1个像素,如果它不是白色,那么我就停止了.然后在同一行,我从最左边的像素开始,并检查,如果是白色,我把它变成透明,然后向左移动1个像素等等...

然后我向下移动1行并重复整个过程..

这样我就不会删除实际图像中的任何白色像素.

Answer 1

它非常简单易用getImageData,putImageData只需注意你可以在图像越大的情况下对性能产生重大影响.您只需要确定当前像素是否为白色,然后将其alpha更改为0.

现场演示

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:0,b:0, a:0};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        // If its white then change it
        if(r == 255 && g == 255 && b == 255){ 
            // Change the white to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
        }
}

ctx.putImageData(imgd, 0, 0);?

还有人问你是否可以使值变得模糊以便检查.它非常简单,只需检查它是否在一定范围内.以下将关闭白色至纯白色透明.

 // If its white or close then change it
    if(r >=230 && g >= 230 && b >= 230){ 
        // Change the white to whatever.
        pix[i] = newColor.r;
        pix[i+1] = newColor.g;
        pix[i+2] = newColor.b;
        pix[i+3] = newColor.a;
    }

更多资源

• 用画布操作像素
• 有关使用画布进行像素操作的更多信

Answer 2

您可以使用图像处理框架来不手动处理像素数据。

在MarvinJ的情况下，给定颜色，您可以使用一行将所有像素设置为透明：

image.setColorToAlpha(0, 0);

输入图像：

结果：

可运行示例：

image.setColorToAlpha(0, 0);

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/UuvzbLx.png", imageLoaded);

function imageLoaded(){
	image.setColorToAlpha(0, 0);	
	image.draw(canvas);
}