Descarga del elemento Canvas a una imagen

Solución:

Solución que requiere SIN BOTON:

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

Útil si tiene otros desencadenantes para la descarga o desencadenantes a los que no puede hacer referencia fácilmente.

La única forma de guardar es exportar como una imagen … Ya encontraste esta solución, y creo que es la mejor;)

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

Puede utilizar diferentes tipos de imágenes. Cambie el tipo MIME en esta función:

    canvas.toDataURL("image/jpeg");

Otra forma de guardar los datos del lienzo (en un PDF) es usar la biblioteca wkhtmltopdf

Salud. Franco

frankneff.ch / @frankneff

Esta solución es mejor:

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>
    
<canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas>

---

---

Utiliza Nuestro Buscador