Comment enregistrer un canevas HTML5 ?

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

  •  23-09-2019
  •  | 
  •  

Question

Actuellement j'utilise Toile2Image pour enregistrer le contenu de mon canevas HTML5.Cependant, cela ne semble pas fonctionner dans Google Chrome.Toutes les idées sur la façon de contourner le problème sont les bienvenues.:)

Était-ce utile?

La solution

canvas.toDataURL() semble fonctionner correctement dans Chrome, il peut donc être une question bibliothèque. La fonctionnalité « convertir la toile à l'image » semble fonctionner, cependant.

Autres conseils

utilisez ce code 

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

télécharger ces canvas2image.js et base64.js et enregistrez-le dans le dossier local pour le fonctionnement de ce code.

Ceux-ci seront disponibles sur le site 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+'"/>');

Oui je l'ai fait!=)

Jetez un œil à www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235.Vous pouvez le voir fonctionner http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Pour que l'image ne s'affiche pas dans le navigateur mais soit sous forme de téléchargement, je dois créer ce simple fichier php : www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=239

Je dois créer un fichier close.html dans le navigateur, ne pas conserver de page about:blank après le début du téléchargement. www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

Je ferai probablement un gros article à ce sujet sur thiagomata.blog.com mais je pense qu'avec ces fichiers, vous pourrez déjà trouver le chemin.

Peut-être que si vous lisez cet article à l'avenir, le lien thiagomata.com pourra être rompu car je vais bientôt migrer ce projet vers codetodiagram.com.

C'est ça!Thiago Mata

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top