JavaScript - Descargar imagen de canvas con un boton

   
Vista:
Imágen de perfil de Humberto

Descargar imagen de canvas con un boton

Publicado por Humberto humberto_molinalopez@hotmail.com (48 intervenciones) el 25/02/2017 10:04:58
Lo que pasa es que tengo un canvas y quiero agregar un botón que descargue lo que tiene el canvas
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Descargar imagen de canvas con un boton

Publicado por Natalia Betancur (1 intervención) el 26/04/2017 18:12:04
Hola, después de mucho buscar, pues hay mucha info en internet, este fue el único que me funciono. Claro hay otros más sencillos pero mi principal problema era que no me descargaba con el extensión de la imagen.

Te dejo las referencias y el código. Espero te sirva!

· http://lineadecodigo.com/wp-content/uploads/2012/09/guardar-canvas-en-imagen.html
· http://lineadecodigo.com/html5/exportar-el-contenido-de-un-canvas-html5-a-una-imagen/
·http://stackoverflow.com/questions/12796513/html5-canvas-to-png-file

1
<a id="download" download="Canvas.png">Download Canvas</a>
JS-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
var canvas = document.getElementById("canvasSimpleOutline");
function downloadCanvas() {
var data = canvas.toDataURL('image/png');
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
 
/* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
 
this.href = data;
};
document.getElementById("download").addEventListener('click', downloadCanvas, false);
 
 
  </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Humberto

Descargar imagen de canvas con un boton

Publicado por Humberto (48 intervenciones) el 27/04/2017 07:13:52
Gracias men por ayudarme. encontre uno mejor :v Te lo agradezco mucho:

1
2
3
<a id="download">
<input type="button" value="Descargar" onClick="descargar()">
</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
var canvas = document.getElementById("miCanvas");
function descargar(){
    var filename = prompt("Guardar como...","Nombre del archivo");
    if (canvas.msToBlob){ //para internet explorer
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, filename + ".png" );// la extensión de preferencia pon jpg o png
    } else {
        link = document.getElementById("download");
        //Otros navegadores: Google chrome, Firefox etc...
        link.href = canvas.toDataURL("image/png");// Extensión .png ("image/png") --- Extension .jpg ("image/jpeg")
        link.download = filename;
    }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Descargar imagen de canvas con un boton

Publicado por andres anddresmogollon@gmail.com (1 intervención) el 28/07/2017 06:48:51
Muy ùtil, excelente trabajo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar