putImageData no funciona con copia de ImageData

[Pantaláimon]

Buenas,

Tengo el siguiente código relacionado con el tema de pixelado del hilo de desafíos javascript 2014:
http://jsfiddle.net/jefebrondem/745Ds/4/

El problema es con el siguiente código en particular:

Código Javascript:

btn.onclick=function(){
        btn.setAttribute("disabled","disabled");
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        console.log( imageData.data[0] );
        //setInterval( function(){
            console.time( 'a' );
            var copy = Object.create( imageData );
            console.log( copy.data[0] );
            var newImageData = pixelar(copy,canvas.width,canvas.height,pixeles);
            console.timeEnd( 'a' );
            console.log( newImageData.data[0] );
            ctx.putImageData( newImageData, 0, 0);
            console.log('eo');
        //},1000 );
        //console.log( imageData.data[0] );
    }
 

Desearía conservar una copia del elemento imageData para poder pixelarlo de varias formas a partir del original. Para ello he creado una copia con la función Object.create y he pasado esta copia para pixelar. Todo funciona bien hasta que paso el resultado de la función pixelar al argumento de putImageData. He debugueado y no acabo de entender por qué, pues newImageData es también del tipo ImageData.

Un saludo y gracias!

[marlanga]

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

[Pantaláimon]

No he tenido mucho tiempo estos días, pero al final he probado de crear un canvas virtual como dijiste. Y de ahí ir obteniendo la imagen original para modificando siempre con respecto a esa imagen.

Código Javascript:

var canvas  = document.getElementById("canvas");
    var context = canvas.getContext( '2d' );
    canvas.width  = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0, img.width, img.height);
 
    var original = document.createElement("canvas");
    var originalContext = original.getContext( '2d' );
    original.width  = img.width;
    original.height = img.height;
    originalContext.drawImage(img, 0, 0, img.width, img.height);
    
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        btn.setAttribute("disabled","disabled");
 
        setInterval( function(){
            imageData = originalContext.getImageData(0, 0, original.width, original.height);
            context.putImageData( pixelar(imageData,img.width,img.height,pixeles), 0, 0);
        },100 );
    }
 

A primera vista parece que no tenga sentido lo que he hecho, pues parece que siempre se va a mostrar lo mismo. Pero lo que ocurre es que la función pixelar no goza de transparencia referencial. Pues, pixelar ahora toma una porción aleatoria de píxeles y de ahí hace la media. Aquí el código entero:
http://jsfiddle.net/jefebrondem/745Ds/5/

Gracias!