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

问题描述

如果我加载图片，如何循环遍历其所有像素，并将白色（或我指定的颜色）变成透明？

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

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

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

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

解决方案

使用 getImageData 和 putImageData 只是注意，你可以采取相当大的打击性能的图像越大。您只需要确定当前像素是否为白色，然后将其alpha更改为0.

演示

  var canvas = document.getElementById ）; 
 ctx = canvas.getContext（2d），
 image = document.getElementById（testImage）; 
 
 canvas.height = canvas.width = 135; $ b¥b 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  var r = pix [i]，
g = pix [i + 1]，
b = pix [i + 2]; 
 
 //如果它的白色然后改变它
 if（r == 255& g == 255&& b == 255）{
 //更改白色为任何。 
 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（r> = 230&& g > = 230&& b> = 230）{
 //将白色更改为任何内容。 
 pix [i] = newColor.r; 
 pix [i + 1] = newColor.g; 
 pix [i + 2] = newColor.b; 
 pix [i + 3] = newColor.a; 
} 
  

更多资源 b

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

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?

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.

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

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

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

解决方案

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.

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);​

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

More resources

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

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