Comment puis-je enregistrer un canevas HTML en tant qu'image PNG ?

Capturer la sortie d'un canevas HTML sous différents formats d'image

Question :

Le contenu d'un canevas HTML peut-il être capturé ou imprimé sous forme de une image ou un PDF ? Plus précisément, comment une image peut-elle être générée à partir d'un canevas et enregistrée au format PNG ?

Réponse :

Utiliser les fonctionnalités avancées de HTML5, capturer et enregistrer la sortie du canevas sous forme d'image est devenu un processus simple :

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

Une fois les données d'image souhaitées stockées dans la variable img, elles peuvent être utilisées dans diverses façons :

• Générer une nouvelle image :

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

• Afficher directement en HTML :

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

Ce script vous permet de capturer et d'enregistrer la sortie de votre toile sous forme d'image PNG, fournissant ainsi des méthodes pratiques pour utilisation ou distribution ultérieure.

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!