Caché HTML5 de imágenes en canvas/preguntas de putImageData

Question

Estoy utilizando el lienzo HTML5 para cargar una sola instancia de una imagen que luego blitto varias veces en un solo lienzo. La imagen necesita una ligera manipulación basada en píxeles para personalizarla. Mi plan de ataque inicial fue cargar la imagen, aplicarla en un lienzo de respaldo, dibujar mis modificaciones sobre ella y luego tomar los datos de la imagen y almacenarlos en caché para usarlos en el futuro.

Aquí hay un código que he escrito a tal efecto:

context.drawImage(img, 0, 0); 
context.fillStyle = '#ffffff'; 
context.fillRect(0, 0, 2, 2); // Draw a 2x2 rectangle of white pixels on the top left of the image 

imageData = context.getImageData(0, 0, img.width, img.height); 
cusomImage = imageData; 

Aunque esto funciona, me he dado cuenta de que mi imagen (que es un PNG transparente) no mantiene la transparencia. En cambio, cuando uso putImageData para colocarlo en mi lienzo frontal, se representa con un fondo negro. ¿Cómo mantengo la transparencia?

¡Cualquier sugerencia es bienvenida!

Answer 1

putImageData() no hace lo que primero era de esperar: http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData() hace caso omiso directos los píxeles de la lona. Por lo tanto, si dibuja sobre otra cosa en el mismo lienzo, no dibujará "sobre", sino que reemplazará los píxeles del lienzo en el área con sus píxeles.

Me encontré con este problema exacto y finalmente descubrí por qué.

En cuanto a una solución, no he probado esto todavía pero parece prometedor: Why is putImageData so slow?

[EDIT]: He probado este método y funciona bien para mí, mis datos muestra ahora la transparencia correctamente.

Answer 2

El lienzo es negro después de haber sido creado. Hacerlo transparente primero con:

context.fillStyle = 'rgba(0,0,0,0)'; 
context.fillRect(0, 0, width, height);