canvas ImageData remove white pixels

Question

I have some images in html that have a white background. I need to remove the white background. I was thinking that I could make all white pixels transparent, but i dont know how to do that. I would only like to use html/javascript.

Answer 1

Here is how to do it..

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, 0, 0, w, h);
    var imageData = ctx.getImageData(0,0, w, 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,0);

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

and to use it set the src of an image to the returned value of this method.

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

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

---

For this code to work, the image must be coming from the same domain as the code (for security reasons).

Answer 2

Instead of using a JPG, use a PNG with a transparent background around the image. You'll have a better result.