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

Question

如果我加载图像，我如何遍历其所有像素并将白色像素(或我指定的任何颜色)变为透明？

我有一个关于如何做到这一点的想法，但循环过程应该像一个二维数组，所以它会涉及两个 for 循环。

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

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

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

Answer 1

使用 getImageData 和 putImageData 非常简单，请注意，图像越大，性能就会受到显着影响。您只需要确定当前像素是否为白色，然后将其 alpha 更改为 0。

Live Demo

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;
    }

更多资源

• Pixel manipulation with canvas
• Further info on pixel manipulation with canvas