Capturer la sortie du canevas sous forme d'image : résoudre les problèmes avec canvas.toDataURL()

Lors du développement d'applications HTML5, capturer le contenu d'un canevas car une image peut être une tâche essentielle. La méthode canvas.toDataURL() fournit les moyens d'y parvenir, mais parfois sa mise en œuvre peut rencontrer des pierres d'achoppement.

Piège commun

Un problème fréquent rencontré avec Canvas. toDataURL() est que l'image enregistrée peut ne pas s'afficher correctement ou ne pas pouvoir être enregistrée en raison d'une mauvaise utilisation de la méthode. L'extrait de code suivant illustre un problème courant :

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png");      

Dans cet exemple, l'appel à toDataURL() ne spécifie pas le type MIME complet, qui doit être "image/png". En conséquence, l'image générée peut être corrompue ou inutilisable.

Correction du problème

Pour corriger ce problème et assurer la conversion correcte du canevas en image, le type MIME complet doit être fourni comme suit :

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png"); 

De plus, si l'intention est de télécharger l'image localement, vous pouvez utiliser la propriété window.location.href pour définir l'image comme source d'un lien de téléchargement. Ceci peut être réalisé en utilisant le code suivant :

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // Convert to Base64 and Replace MIME Type
window.location.href=image; // Set Image as Source for Download

En utilisant le type MIME complet et en définissant la propriété window.location.href de manière appropriée, vous pouvez enregistrer avec succès le contenu d'un canevas en tant qu'image, vous permettant ainsi d'utiliser le contenu capturé. image dans votre candidature, selon les besoins.