javascript - not - Combinar múltiples lienzos y descargar como imagen

save canvas image to server

Question

Estoy intentando fusionar dos lienzos HTML en un solo lienzo y luego descargar eso como una imagen. Mi código es el siguiente:

function downloadCanvas() {
    var bottleCanvas = document.getElementById(''bottleCanvas'');
    var designCanvas = document.getElementById(''editorCanvas'');

    var bottleContext = bottleCanvas.getContext(''2d'');
    bottleContext.drawImage(designCanvas, 69, 50);

    var dataURL = bottleCanvas.toDataURL("image/png");
    var link = document.createElement(''a'');
    link.download = "bottle-design.png";
    link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
}

Mi problema aquí parece ser la siguiente línea:

bottleContext.drawImage(designCanvas, 69, 50);

Se supone que esto atrae el contenido de un lienzo sobre el otro, lo que hace, pero luego evita que la última parte del código se ejecute y descargue la imagen. Cuando elimino esta línea en particular, la función de descarga funciona bien, pero desafortunadamente solo descarga uno de los lienzos.

Por lo tanto, mi pregunta es: ¿Qué estoy haciendo mal aquí? o ¿Cómo fusionaría dos lienzos HTML y luego lo descargaría como una imagen?

(En otra nota, mi código anterior para descargar solo funciona bien en Chrome; en otros navegadores no puedo establecer el nombre del archivo y establecer la extensión del archivo).

Answer 1

Es probable que se encuentre con un error de seguridad causado al dibujar una imagen cuyo origen sea de dominio cruzado en su lienzo. Dibujar una imagen de dominio cruzado en cualquier lienzo "manchará" ese lienzo y no permitirá context.toDataURL y context.toDataURL un error de seguridad si intentas ejecutar toDataURL . Esta misma "contaminación" ocurrirá si dibuja un lienzo contaminado en un lienzo no contaminado.

La solución es asegurarse de que todas las imágenes que dibuje en el lienzo se originen en el mismo dominio que su página web.

Aquí hay un ejemplo de que su código funciona correctamente cuando se usa una imagen que no genera el error de seguridad entre dominios:

var img=new Image();
img.crossOrigin=''anonymous'';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/fish.jpg";
function start(){

  var bottleCanvas = document.getElementById(''bottleCanvas'');
  var designCanvas = document.getElementById(''editorCanvas'');
  var ctxb=bottleCanvas.getContext(''2d'');
  var ctxd=editorCanvas.getContext(''2d'');

  ctxb.drawImage(img,0,0);
  ctxd.fillRect(50,50,50,50);

  downloadCanvas();
}

function downloadCanvas() {
  var bottleCanvas = document.getElementById(''bottleCanvas'');
  var designCanvas = document.getElementById(''editorCanvas'');

  var bottleContext = bottleCanvas.getContext(''2d'');
  bottleContext.drawImage(designCanvas, 69, 50);

  var dataURL = bottleCanvas.toDataURL("image/png");
  var link = document.createElement(''a'');
  link.download = "bottle-design.png";
  link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  link.click();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="bottleCanvas" width=300 height=300></canvas>
<canvas id="editorCanvas" width=300 height=300></canvas>

Satisfacer las restricciones de seguridad de origen cruzado

Puede alojar su imagen en un servidor que ya permite el acceso de origen cruzado a sus imágenes. Eso es lo que hago en mi ejemplo anterior. Dropbox.com le permite especificar que una imagen que aloja se puede dibujar en el lienzo sin "manchar" ese lienzo.

También puede configurar su cubo S3 para permitir el acceso de origen cruzado a sus imágenes. Este enlace proporciona instrucciones sobre cómo configurar los encabezados de respuesta para las imágenes de origen cruzado del servidor: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Tenga en cuenta que, como en mi ejemplo, si usa imágenes de origen cruzado, también debe establecer el image.crossOrigin=''anonymous'' cuando cree inicialmente el objeto de imagen en javascript.