javascript – canvas ImageData删除白色像素

前端之家收集整理的这篇文章主要介绍了javascript – canvas ImageData删除白色像素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些html中有白色背景的图像.我需要删除白色背景.我以为我可以让所有白色像素透明,但我不知道该怎么做.我只想使用html / javascript.

解决方法

这是怎么做的..
function white2transparent(img)
{
    var c = document.createElement('canvas');

    var w = img.width,h = img.height;

    c.width = w;
    c.height = h;

    var ctx = c.getContext('2d');

    ctx.drawImage(img,w,h);
    var imageData = ctx.getImageData(0,h);
    var pixel = imageData.data;

    var r=0,g=1,b=2,a=3;
    for (var p = 0; p<pixel.length; p+=4)
    {
      if (
          pixel[p+r] == 255 &&
          pixel[p+g] == 255 &&
          pixel[p+b] == 255) // if white then change alpha to 0
      {pixel[p+a] = 0;}
    }

    ctx.putImageData(imageData,0);

    return c.toDataURL('image/png');
}

并使用它将图像的src设置为此方法的返回值.

var someimage = document.getElementById('imageid');
someimage.src = white2transparent(someimage);

http://jsfiddle.net/gaby/UuCys/

要使此代码起作用,映像必须来自与代码相同的域(出于安全原因).

原文链接:https://www.f2er.com/js/154539.html

猜你在找的JavaScript相关文章