Descargar un elemento de lienzo Html5 como una imagen con la extensión de archivo con Javascript

Question

Me gustaría poder descargar un elemento de lienzo Html5 como una imagen con la extensión de archivo con Javascript.

La biblioteca CanvasToImage no parece poder lograr esto.

Aquí está mi código hasta ahora que se puede ver en este JsFiddle.

<div id="canvas_container"> 
</div> 
<p> 
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a> 
</p> 




$("#create_image").click(function() { 
var cnvs = createSmileyOnCanvas(); 
$('#canvas_container').append(cnvs); 
}); 


$("#download_image").click(function() {  
var img = $('#smiley_canvas').toDataURL("image/png"); 
var uriContent = "data:application/octet-stream," + encodeURIComponent(img); 
window.open(uriContent, 'download smiley image'); 
}); 



function createSmileyOnCanvas() { 
var canvas = document.createElement('canvas');  
canvas.id = 'smiley_canvas';  
var ctx = canvas.getContext('2d');   

// Draw shapes 
ctx.beginPath(); 
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle 
ctx.moveTo(110,75); 
ctx.arc(75,75,35,0,Math.PI,false); // Mouth 
ctx.moveTo(65,65); 
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye 
ctx.moveTo(95,65); 
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye 
ctx.stroke(); 

return canvas; 
} 

Answer 1

Con el fin de forzar/sugerir un nombre de archivo en el diálogo de descarga del navegador, lo que tendría que enviar la cabecera Content-Disposition: attachment; filename=foobar.png.

Esto no es posible hacerlo a través de window.open, por lo que está de suerte a menos que haya algunos hacks específicos del navegador para esto.

Si realmente necesita el nombre del archivo, puede intentar usar el nuevo atributo de descarga en a, <a href="put stuff here" download="filename here">. Sin embargo, aún no cuenta con un amplio apoyo.

Otra alternativa sería primero enviar los datos al servidor usando ajax, luego redirigir el navegador a algún script del lado del servidor que luego serviría los datos con el encabezado correcto.

Answer 2

Hola, he creado un plugin jquery que te permitirá hacer la misma tarea con facilidad pero también utilizar php para descargar la imagen. déjame explicarte cómo funciona

El complemento tiene 2 funciones secundarias a las que puedes llamar independientemente para agregar imágenes al lienzo y la otra es descargar la imagen actual que está sobre el lienzo.

agregar la imagen a la lona

Para ello, tiene que pasar el id del elemento canvas y la ruta de la imagen que desea añadir una imagen

descarga desde el lienzo

para ello, tiene que pasar el id del elemento canvas

$('body').CanvasToPhp.upload({ 
    canvasId: "canvas", // passing the canvasId 
    image: "455.jpg"  // passing the image path 
}); 

// downloading file 
$('#download').click(function(){ 
    $('body').CanvasToPhp.download({ 
     canvasId: "canvas" // passing the canvas id 
    }); // 
}); 

En primer lugar es necesario descargar el archivo plugin que se puede encontrar aquí http://www.thetutlage.com/post=TUT213

También he creado una pequeña demostración http://thetutlage.com/demo/canvasImageDownload

Answer 3

Esto parece funcionar para mí:

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>