que - metadatos html5

Cómo copiar el contenido de un lienzo a otro lienzo localmente

Question

Me gustaría copiar TODOS los contenidos de un lienzo y transferirlos a otro todo en el lado del cliente. Creo que usaría el canvas.toDataURL() y context.drawImage() para implementar esto, pero me estoy encontrando con algunos problemas.

Mi solución sería obtener Canvas.toDataURL() y almacenar esto en un objeto Image en Javascript, y luego usar el método context.drawImage() para colocarlo nuevamente.

Sin embargo, creo que el método toDataURL devuelve una etiqueta codificada de 64 bits con "data:image/png;base64," de ella. Esto no parece ser una etiqueta válida, (siempre podría usar algunos RegEx para eliminar esto), pero es esa cadena codificada de 64 bits DESPUÉS de la "data:image/png;base64," substring una imagen válida? ¿Puedo decir image.src=iVBORw...ASASDAS , y dibujar esto de nuevo en el lienzo?

He analizado algunos problemas relacionados: mostrar la imagen del lienzo de un lienzo a otro lienzo usando base64

Pero las soluciones no parecen ser correctas.

Answer 1

@ robert-hurst tiene un enfoque más limpio, pero esta solución se puede usar en lugares en los que realmente desea tener una copia de la Url de datos después de copiar. Ejemplos: cuando está construyendo un sitio web que usa muchas operaciones de imagen / lienzo.

    // select canvas elements
    var sourceCanvas = document.getElementsById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext(''2d'');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

Answer 2

En realidad, no es necesario crear una imagen en absoluto. drawImage() aceptará un Canvas así como un objeto de Image .

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext(''2d'');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

ImageData más rápido que usar un objeto ImageData o elemento Image .

Tenga en cuenta que sourceCanvas puede ser un HTMLImageElement , HTMLVideoElement o un HTMLCanvasElement . Como menciona Dave en un comentario debajo de esta respuesta, no puede usar un contexto de dibujo de lienzo como su fuente . Si tiene un contexto de dibujo de lienzo en lugar del elemento lienzo desde el que se creó, hay una referencia al elemento lienzo original en el contexto bajo context.canvas .

Aquí hay un jsPerf para demostrar por qué esta es la única manera correcta de clonar un lienzo: http://jsperf.com/copying-a-canvas-element canvas- http://jsperf.com/copying-a-canvas-element

Answer 3

Me las arreglé para que funcione, lo que hice parece correcto:

testImage = new testImage();
testImage.src = data:image/png;base64,iVBORw0KG......kSZIkSZIkSZI0u/1/diDteJCiN80AAAAASUVORK5CYII=

(Arriba URL es un ejemplo)

context.drawImage(testImg,0,0);

Esto parece funcionar cuando lo ejecuto en la consola en Chrome y FireBug