Comment enregistrer un canevas en tant qu'image à l'aide de canvas.toDataURL() ?

Enregistrement d'un canevas en tant qu'image à l'aide de canvas.toDataURL()

Dans le monde du développement Web, vous pouvez rencontrer des cas où vous désirez pour conserver le contenu d'un élément de canevas sous forme d'image. Pour y parvenir, vous pouvez utiliser la puissante méthode canvas.toDataURL(). Cependant, si vous rencontrez des difficultés lors de la mise en œuvre de cette fonctionnalité, examinons les problèmes potentiels.

Un piège courant concerne le code que vous avez fourni. La section suivante abordera la ligne problématique :

<code class="js">var myImage = canvas1.toDataURL("image/png");</code>

Cette ligne convertit votre élément canevas en une chaîne contenant les données de l'image au format PNG. Cependant, il manque une étape cruciale : vous devez spécifier ce que vous voulez faire avec cette chaîne. Pour enregistrer l'image localement, vous devez :

1. Remplacer le type de données : Remplacer "image/png" par "image/octet-stream" pour vous assurer que votre navigateur le reconnaît en tant que flux binaire plutôt qu'en tant que type d'image.
2. Définir l'emplacement de la fenêtre : Utilisez window.location.href = image; pour enregistrer l'image localement.

Le code corrigé ressemblerait à ceci :

<code class="js">var image = canvas1.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;</code>

Avec ces modifications, votre code devrait réussir à enregistrer le contenu du canevas en tant qu'image sur votre site local. appareil.

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!