Descargue un elemento de canvas Html5 como una image con la extensión de file con Javascript

Me gustaría poder download un elemento de canvas Html5 como una image con la extensión de file con Javascript.

La biblioteca CanvasToImage no parece ser capaz de lograr esto.

Aquí está mi código hasta ahora, que puedes 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; } 

Para forzar / sugerir un nombre de file en el dialog de descarga del browser, deberá enviar la Content-Disposition: attachment; filename=foobar.png Content-Disposition: attachment; filename=foobar.png encabezado.

Esto no es posible a través de window.open , por lo que no tienes suerte a less que haya algunos hacks específicos del browser para esto.

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

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

Esto parece funcionar para mí:

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

Hola, he creado un plugin jquery que te permitirá hacer la misma tarea con facilidad, pero también usar php para download la image. Déjame explicarte cómo funciona

El complemento tiene 2 funciones secundarias a las que puede llamar independientemente para agregar imágenes al canvas y la otra es download la image actual que se encuentra en el canvas.

Añadir image al canvas

Para esto, necesita pasar la identificación del elemento canvas y la ruta de la image que desea agregar

download image del canvas

Para esto, necesitas pasar la identificación 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 }); // }); 

Primero necesita download el file de complemento que puede encontrar aquí http://www.thetutlage.com/post=TUT213

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