如何在 html5 和 javascript 中编辑像素并删除画布图像中的白色背景 [英] how to edit pixels and remove white background in a canvas image in html5 and javascript

问题描述

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

If I load an image, how can I loop through all its pixels and turn the white ones (or which ever color I specify) to be turned transparent?

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

I have an idea on how to do this, but the looping process should be like a 2d array, so it would involve two for loops.

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

I was thinking I would start on the top row first pixel, iterating to the right, if its a white pixel, then i turn it transparent, and move 1 pixel to the right, if its not white, then I stop. Then in the same row, I start from the left most pixel, and check, if white, I turn it transparent, then move 1 pixel to the left, etc, etc...

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

Then I move 1 row down and repeat the whole process..

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

This way I don't remove any white pixels in the actual image.

推荐答案

使用 getImageData 和 putImageData 非常简单，请注意您可以在性能越大图像越大.您只需要确定当前像素是否为白色，然后将其 alpha 更改为 0.

Its pretty simple to do using getImageData and putImageData just note you can take a pretty significant hit on performance the larger the image gets. You just need to determine if the current pixel is white, then change its alpha to 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);​

还有人问您是否可以使值变得模糊以进行检查.真的很简单，只要检查它是否在一定范围内.以下将关闭白色变为纯白色透明.

It was also asked if you could make the values sort of fuzzy to check. Its really easy, just check if its in a certain range. The following will turn off white to pure white transparent.

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

更多资源

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

这篇关于如何在 html5 和 javascript 中编辑像素并删除画布图像中的白色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！