Utilice Canvas para convertir píxeles no transparentes en blanco

Estoy buscando una forma de tomar imágenes (logotypes, icons de aplicaciones, etc.) y convertirlas a blanco (sin include la transparencia) usando javascript / canvas.

Aquí hay un ejemplo de lo que me gustaría (usando imágenes estáticas, obviamente): http://jsfiddle.net/4ubyj/

Canvas API tiene methods de composition específicamente para cosas como "dibujar solo en píxeles que no son transparentes en la image original". Esto es mucho más fácil que jugar con los datos de image.

Ejemplo jsFiddle (ahora con image en línea)

punta de sombrero para el violín inicial de @WilliamVanRensselaer.

La operación compuesta que desea es source-in , lo que significa "dibujar las partes opacas de lo que bash pintar solo donde están encima de los píxeles opacos en la image sobre la que se dibuja".

HTML:

 <a href="javascript:doIt()">paint non-transparent regions white</a><br> <canvas id="canvas" width="600" height="200"></canvas> 

Javascript:

 var canvas = document.getElementById( "canvas" ), ctx = canvas.getContext( "2d" ); imgSrc = "http://d.pr/Td69+"; var b = document.getElementsByTagName("body")[0]; var i = document.createElement("img"); i.src = imgSrc; i.style.setProperty("display", "none"); i.onload = function() { ctx.drawImage(i, 0, 0); } b.appendChild(i); window.doIt = function() { ctx.globalCompositeOperation = "source-in"; ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, 600, 200); } 

reference

Aquí hay algo para que comiences. Esto básicamente cambia el píxel a blanco si el alfa no es cero, aunque puedes hacer modificaciones si quieres.

Ejemplo: http://jsfiddle.net/Q27Qc/

 var canvas = document.getElementById( "canvas" ), ctx = canvas.getContext( "2d" ); // Put something on the canvas (can be an image) ctx.font = "100px Arial"; ctx.fillText( "Google", 20, 130 ); // Get image data for part of the canvas (to see effects) var img = ctx.getImageData( 20, 40, 80, 100 ), imgData = img.data; // Loops through bytes and change pixel to white if alpha is not zero. for ( var i = 0; i < imgData.length; i += 4 ) { if ( imgData[i + 3] !== 0 ) { imgData[i] = 255; imgData[i + 1] = 255; imgData[i + 2] = 255; } } // Draw the results ctx.putImageData( img, 20, 40 ); 

Es posible, un poco intrincado pero no excesivamente complejo. Consulte esta página de MSDN para get más instrucciones.

Básicamente, creo que debes:

  • cargar la image en el canvas
  • Obtenga una matriz de cada píxel en el canvas
  • Compruebe el subcomponente de cada píxel (cada píxel está formado por un subcomponente rojo, verde y azul)
  • convertir cualquier color sólido de cada subcomponente en blanco
  • Escriba la siguiente matriz de datos de píxeles en el canvas

Escribí un editor de imágenes usando jQuery y canvas e hice algo muy similar donde una image se puede convertir a escala de grises o tono sepia. Lamentablemente, el tutorial que le acompañé no es gratuito, pero si está dispuesto a gastar como $ 9 o más, puede verificarlo 🙂