Comment enregistrer un canevas en HTML5 ? Méthode de sauvegarde du canevas HTML5

Le contenu de cet article explique comment enregistrer le canevas en HTML5 ? La méthode de sauvegarde du canevas HTML5 a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

J'ai enfin dessiné un graphique sympa sur la toile, je devrais le sauvegarder. Mais malheureusement, ces graphiques dans la toile eux-mêmes ne sont pas de véritables images et ne peuvent pas être enregistrés directement. Heureusement, l'API Canvas fournit la méthode toDataURL(), qui peut convertir les graphiques du canevas en images.

Par défaut, la méthode toDataURL() convertit le graphique en png au format d'encodage base64, puis renvoie les données de l'URL de données. Vous pouvez transmettre des paramètres de type MIME à toDataURL() pour convertir le canevas en images dans d'autres formats.

Une fois que vous avez les données URL des données, vous pouvez remplir les données directement dans l'élément ou les télécharger directement depuis le navigateur. Voici un exemple pour illustrer comment utiliser la méthode toDataURL() pour enregistrer l'intégralité du canevas sous forme d'image.

Le code HTML est le suivant :

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

Le code Javascript est le suivant :

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton "Afficher comme png" ou "Afficher sous forme d'image jpg", la méthode toDataURL() sera appelée pour générer une image à partir du contenu du canevas et la remplir dans la balise img pour que les utilisateurs puissent la télécharger.

1. La méthode toDataURL() est une méthode de l'élément canevas lui-même, pas une méthode de l'objet contextuel canevas.

2. Le format par défaut pour enregistrer les images par la méthode toDataURL() est "image/png", et le navigateur ne prend pas très bien en charge les autres formats. Par exemple, la version 41.0.2272.118 du navigateur Google Chrome prend également en charge le format « image/jpeg », mais ne prend pas en charge le format « image/gif ».

2. Les navigateurs modernes prennent déjà en charge le clic droit sur le canevas pour enregistrer le canevas en tant qu'image, mais il sera enregistré au format "image/png" par défaut. Bien sûr, vous pouvez appeler par programme la méthode toDataURL(), transmettre les paramètres de type MIME et l'enregistrer dans d'autres formats.

Ce qui précède est de savoir comment enregistrer le canevas en HTML5 ? Une introduction complète à la méthode de sauvegarde du canevas HTML5. Si vous souhaitez en savoir plus sur le Tutoriel vidéo HTML5, veuillez faire attention au site Web PHP chinois.

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!