Come salvare HTML5 canvas?

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

  •  23-09-2019
  •  | 
  •  

Domanda

Attualmente sto usando Canvas2Image per salvare il contenuto del mio HTML5 canvas.Non appare in Google Chrome, tuttavia.Tutte le idee su come aggirare il problema sono i benvenuti.:)

È stato utile?

Soluzione

canvas.toDataURL() sembra funzionare bene in Chrome, quindi potrebbe essere un problema di biblioteca. La funzionalità "convertire tela di immagine" sembra funzionare, però.

Altri suggerimenti

utilizzare questo codice 

<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>

scaricare questi canvas2image.js e base64.js e salvarlo nella cartella locale per il funzionamento di questo codice.

Questi saranno disponibili nel sito 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ì l'ho fatto!=)

Prendere uno sguardo in www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235.Si può vedere in esecuzione su http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Per rendere l'immagine non mostra nel browser, ma essere come un donwload, ho la necessità di creare questo semplice file php: www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=239

Ho bisogno di creare un close.html per il browser non tenere un about:blank pagina dopo il download, aprire www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

Io probabilmente fare un grande post su di esso in thiagomata.blog.com ma credo che, con questo file si sarà già in grado di trovare la strada.

Forse, se leggi questo post, in futuro, il thiagomata.com link può essere interrotta, perché io presto la migrazione di questo progetto per la codetodiagram.com.

Ecco!!!Thiago Mata

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top