lienzo ImageData eliminar píxeles blancos

Question

Tengo algunas imágenes en html que tienen un fondo blanco. Necesito eliminar el fondo blanco. Estaba pensando que podía hacer transparentes todos los píxeles blancos, pero no sé cómo hacerlo. Solo me gustaría usar html/javascript.

Answer 1

Aquí es cómo hacerlo ..

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

y utilizarlo establece la src de una imagen para el valor devuelto de este método.

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

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

---

Para que este código funcione, la imagen debe venir desde el mismo dominio que el código (por razones de seguridad ).

Answer 2

Bueno, los datos de imagen que obtienes de un objeto canvas con "getImageData" son solo información de píxeles RGBA, es decir, transparencia roja, verde, azul y alfa. De este modo, podría obtener los datos de la imagen y simplemente repetirlos, mirando cuatro píxeles a la vez. Cuando vea uno blanco, puede ponerlo en cero (junto con el valor alfa).

Lo que pasa es que no estará satisfecho con los resultados porque todavía habrá un "halo" alrededor de los elementos no blancos. La imagen original es (probablemente) ligeramente borrosa, efectivamente anti-alias, en los bordes de las áreas de color. Por lo tanto, hay píxeles a lo largo de los bordes que son un poco más claros que la imagen principal, y verá esos aún después de eliminar todos los blancos puros.

Para limpiar realmente los bordes es bastante complicado, dependiendo de qué tipo de imágenes fuente tienes exactamente. No creo que sea un procesamiento de imágenes de vanguardia ni nada por el estilo, pero no es trivial.

Answer 3

En lugar de usar un JPG, use un PNG con un fondo transparente alrededor de la imagen. Tendrás un mejor resultado.

Answer 4

Pero si quieres justo por encima de la propiedad imageData antes de dibujar hay una solución más corto :)

function clearData(imageData ) 
{ 
    var d = imageData.data; 
    var L = d.length; 
    for (var i = 3; i < L; i += 4) 
    { 
     d[i] = 0; 
    } 
}