Ver Mensaje Individual
  #2 (permalink)  
Antiguo 19/12/2013, 10:35
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: putImageData no funciona con copia de ImageData

Object.create no sirve para clonar instancias, si no para copiar prototipo de objetos; y no funciona como parece que debe funcionar. Actúa sobre los prototipos, metiendo referencias. Es decir, si creas un objeto llamado B a partir de otro llamado A, en realidad estás copiando todas las referencias de las propiedades de A en el prototipo del objeto B. Pero si luego cambias por ejemplo, alguna propiedad de B, también se la estás cambiando a A.

De hecho, misteriosamente no hay ningún método para clonar instancias javascript de forma general.

En el caso concreto de lo que quieres hacer, tienes varias alternativas. Además de tener un canvas insertado en el DOM con su respectivo contexto, crear también otro contexto de un canvas virtual creado dinámicamente en memoria con createElement, pero sin meterlo nunca en el DOM. Pintas en ese contexto virtual, la imagen. Le sacas el ImageData, la procesas, y la dibujas en el contexto del canvas real que sí está en el DOM.
De hecho, hay una técnica llamada "doble buffer" implementada en canvas usando esta idea, en pintar en un contexto-canvas virtual, que es mucho mas rápido que pintar en el contexto-canvas visible insertado en el DOM. Cuando esté todo dibujado, se mete el contexto virtual en el contexto real con contextoReal.drawImage(contextoVirtual.canvas,0,0) .

También puedes dibujar la imagen otra vez antes de pixelarla, con drawImage,antes de hacer el getImageData de nuevo.

O hacer una copia del atributo DATA del CanvasImageData, y asignarle cuando quieras al CanvasImageData con el método set.
copia= new Uint8ClampedArray(imageData.data);
imageData.data.set(copia);

Última edición por marlanga; 19/12/2013 a las 10:43