Comment puis-je capturer un canevas HTML et l'enregistrer sous forme d'image (PNG, JPG, GIF) ou PDF ?

Capturer un canevas HTML sous forme d'image ou de PDF

Question :

Pouvez-vous capturer le contenu affiché sur un canevas HTML et l'exporter sous forme d'image (GIF, JPG, PNG) ou PDF ? Plus précisément, comment puis-je générer une image PNG à partir d'un graphique de canevas ?

Réponse :

Oui, il est possible de capturer le contenu d'un canevas HTML et de l'exporter sous forme d'image ou de PDF. Pour générer une image PNG à partir d'un canevas :

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

Cela créera une chaîne contenant les données PNG. Vous pouvez ensuite utiliser ces données pour créer un nouvel élément d'image ou l'écrire dans un fichier.

Création d'un nouvel élément d'image

Pour créer un nouvel élément d'image et affichez l'image PNG, utilisez le code suivant :

document.getElementById('existing-image-id').src = img;

Cela définira l'attribut src de l'élément image avec l'ID 'existing-image-id' aux données PNG, affichant efficacement le contenu du canevas sous forme d'image.

Écrire dans un fichier

Pour écrire les données PNG dans un fichier, utilisez le code suivant :

document.write('<img src="' + img + '" />');

Cela écrira les données de l'image directement dans le document HTML. Vous pouvez ensuite enregistrer le document sous forme de fichier avec l'extension souhaitée (par exemple, .png) pour enregistrer le contenu du canevas sous forme d'image.

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!