Comment enregistrer les données du canevas dans un fichier en HTML5 ?

Le canevas n'est qu'une zone rectangulaire sur la page HTML. Nous pouvons dessiner des graphiques dans cette zone rectangulaire (Canvas) à l'aide de JavaScript.

Le canevas peut être créé en HTML5 sous la forme -

<canvas id = &rdquo;canvas1&rdquo; width = &rdquo;250&rdquo; height = &rdquo;150&rdquo;></canvas>                                 

Cela créera un canevas vide nommé canevas1, largeur = 200, hauteur = 100.

Pour y dessiner un graphique, nous utilisons JavaScript -

var canvas = document.getElementById("Canvas1");
 var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0,0); ctx1.lineTo(300,200);
 ctx1.stroke(); // This method actually draw graphics as per context object             

Pour enregistrer ce graphique, nous devons le sauvegarder sous une URL de données comme img.png ou img.jpg

Pour cela, nous écrirons -

var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png
document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png)
so that it can be saved as image.

De cette façon , nous pouvons enregistrer les données du canevas dans des fichiers HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!