Cómo guardar el elemento canvas de HTML5?

StackOverflow https://stackoverflow.com/questions/2544260

  •  23-09-2019
  •  | 
  •  

Pregunta

Actualmente estoy usando Canvas2Image para guardar el contenido de mi canvas de HTML5.No parecen funcionar en Google Chrome, sin embargo.Cualquier idea sobre cómo evitar el problema son bienvenidos.:)

¿Fue útil?

Solución

canvas.toDataURL() parece bien el trabajo en Chrome, por lo que puede ser un problema de biblioteca. El "lienzo convertido a la imagen" funcionalidad parece funcionar, sin embargo.

Otros consejos

utilizar este código 

<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>



<script>
function savecanvasfile(){
    var canvas = document.getElementById('canvas_name');
    var context = canvas.getContext('2d');
    var strDataURI = canvas.toDataURL();
    Canvas2Image.saveAsPNG(canvas);
}
</script>

descargar estos canvas2image.js y base64.js y guardarlo en la carpeta local para el funcionamiento de este código.

Estos estará disponible en el sitio http://www.nihilogic.dk/labs/canvas2image/ 

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');

Sí lo hice!=)

Echa un vistazo en www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235.Usted puede ver que se está ejecutando en http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Para hacer que la imagen no se mostrará en el navegador, pero ser como una descarga, necesito crear este simple archivo php: www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=239

Necesito crear un close.html para que el navegador no guarde una sobre la página en blanco:después de que el inicio de la descarga www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

Yo, probablemente, hacer un gran post sobre ello en el thiagomata.blog.com pero creo que con este archivos que ya será capaz de encontrar el camino.

Tal vez, si usted lee este post en el futuro la thiagomata.com enlace puede ser roto porque me emigrar pronto este proyecto a la codetodiagram.com.

Eso es todo!Thiago Mata

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top