Question Comment sauvegarder le canevas HTML5?


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


12
2018-03-30 09:58


origine


Réponses:


canvas.toDataURL() semble fonctionner correctement dans Chrome, il peut donc être un problème de bibliothèque. La fonctionnalité "Convertir la toile en image" semble cependant fonctionner.


7
2018-03-30 10:10



utiliser 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échargez ces canvas2image.js et base64.js et enregistrez-les dans le dossier local pour que ce code fonctionne.

Ceux-ci seront disponibles sur le site http://www.nihilogic.dk/labs/canvas2image/


5
2018-01-09 06:07



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

4
2017-09-26 22:54



Oui je l'ai fait! =)

Jeter un oeil dans www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235. Vous pouvez le voir en cours d'exécution http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Pour que l'image ne s'affiche pas dans le navigateur mais soit téléchargée, je dois créer ce fichier php simple: 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 pour ne pas garder une page blanche après le démarrage du téléchargement www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

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

Peut-être que si vous lisez ce message dans le futur, le lien thiagomata.com peut être rompu car je vais bientôt migrer ce projet vers codetodiagram.com.

C'est tout! Thiago Mata


2
2017-08-13 21:39