Simeon Visser est un écrivain qui aime couvrir des sujets tels que la technologie et les voyages.
Pour de nombreuses applications Web, il peut être utile de transformer l’image visuelle d’un canevas HTML5 en une représentation base64 de celui-ci qui peut être envoyée et partagée. Comme ce tutoriel va vous le montrer, ce n’est pas très difficile et il est également très simple de charger une image base64 sur un canevas HTML5. La méthode toDataURL() d’un canevas joue un rôle important dans ce processus et je vais vous montrer comment l’utiliser.
Dans ce tutoriel, vous verrez les deux techniques pour convertir une image en base64 et comment passer de base64 à une image. Je discuterai également de certaines façons possibles d’utiliser cette fonctionnalité dans des sites Web interactifs.
Que diriez-vous d’un site Web où vous pouvez partager vos propres images avec d’autres ? Une telle fonctionnalité est facilement mise en œuvre avec les techniques décrites dans ce didacticiel. Je donnerai plusieurs autres exemples plus loin dans ce tutoriel.
Qu’est-ce que le canevas HTML5 ?
Le canevas HTML5 est l’un de mes ajouts préférés au standard Web HTML. Avec lui, vous pouvez écrire du code JavaScript pour dessiner directement sur vos pages Web. J’ai écrit plusieurs tutoriels qui expliquent les bases de la façon de dessiner sur une toile et comment faire diverses choses, comme créer du texte, des cercles et des arcs.
Qu’est-ce que Base64 ?
Base64 est un moyen de représenter des données en utilisant uniquement des caractères lisibles comme des lettres, des chiffres et certains symboles comme le symbole plus. Ces données peuvent être n’importe quoi, comme une image ou un fichier, mais il s’agit généralement de données qui ne sont pas du texte brut (sinon, il n’y a pas grand intérêt à les convertir en base64).
Cette représentation, également connue sous le nom de chaîne base64, est très utile car elle peut être utilisée partout où du texte normal peut également être utilisé. Cela facilite le stockage des images – vous pouvez avoir plusieurs images dans un fichier texte brut par exemple.
Les détails exacts du fonctionnement de base64 ne sont pas pertinents pour ce didacticiel. Tout ce qui compte, c’est que base64 est une manière différente de représenter les mêmes données d’image visuelle mais de manière textuelle. Je renverrai le lecteur intéressé à l’article base64 sur Wikipedia si vous voulez en savoir plus.
Comment obtenir des données d’image de canevas à l’aide de toDataURL()
Le canevas en HTML5 a une méthode appelée toDataURL() que vous pouvez appeler pour transformer un canevas HTML5 en une image PNG et pour obtenir les données d’image de ce canevas. Par défaut, il vous donnera une représentation base64 de l’image au format PNG. En termes plus simples, vous obtiendrez une image PNG mais elle a été encodée en base64. Pour la méthode toDataURL(), le format PNG est le seul format d’image pris en charge par tous les navigateurs Web compatibles HTML5. Certains navigateurs prennent en charge plusieurs formats d’image.
Vous pouvez appeler toDataURL avec un argument, tel que « image/jpeg » ou « image/png » si vous souhaitez spécifier le format d’image souhaité. Nous n’avons pas à nous en soucier et nous pouvons simplement appeler toDataURL sans arguments pour obtenir une image PNG en représentation base64. Sachez que la norme HTML5 exige uniquement que les navigateurs prennent en charge PNG pour toDataURL. Il est donc préférable d’utiliser ce format d’image si vous souhaitez que votre code fonctionne dans tous les navigateurs Web.
Dans le code suivant, nous avons un canevas et nous appelons la méthode toDataURL() pour obtenir les données de l’image.
Notre image visuelle
La variable imgData contient maintenant une représentation base64 de l’image actuellement sur le canevas. Cela ressemble à ceci : données:image/png;base64,iVBORw0 … AAAElFTkSuQmCC. Je n’ai montré que le début et la fin des données car ce serait trop de tout montrer. Comme vous pouvez le voir, cela commence par « data: », puis le type d’image (« image/png »), puis l’encodage (« base64 ») et enfin toutes les données de l’image en texte.
En appelant simplement toDataURL(), nous avons transformé l’image en une représentation textuelle. C’est une bonne chose car le texte est beaucoup plus facile à partager ou à envoyer. En fait, si vous deviez copier toute cette représentation textuelle de l’image et que vous l’envoyiez à quelqu’un d’autre, ils peuvent le coller dans la barre d’adresse de leur navigateur et ils verront l’image.
Que pouvons-nous faire avec toDataURL() ?
Que pouvons-nous faire avec ces données ?
Faites défiler pour continuer
- Nous pourrions envoyer la chaîne base64 au serveur pour le stockage dans une base de données. Un utilisateur peut créer une image à l’aide d’un éditeur d’images de canevas HTML5, et l’image peut être soumise au site Web. L’image peut être stockée sous forme de chaîne base64 dans la base de données et elle peut facilement être chargée et affichée à nouveau sur un canevas (voir plus loin dans ce didacticiel pour savoir comment procéder). Les gens pourraient créer et partager de l’art de cette façon.
- Nous pouvons créer une fonctionnalité d’annulation/rétablissement pour un tel éditeur d’images de canevas. Vous pouvez suivre toutes les modifications apportées par l’utilisateur et enregistrer chaque version de l’image sous forme de chaîne base64. Si l’utilisateur a fait une erreur et souhaite annuler la modification la plus récente, vous pouvez charger la dernière base64 et l’afficher sur le canevas.
- Une fonctionnalité « envoyer l’image par email ». Comme vous le savez peut-être ou non, base64 est également utilisé lorsque vous joignez une image (ou tout autre fichier d’ailleurs) à un e-mail. Un site Web pourrait désormais offrir la possibilité d’envoyer une image à vos amis par e-mail. Il reçoit simplement l’image de votre part en représentation base64, puis il compose un e-mail avec ces données base64 incluses.
Comment charger des données d’image Base64 sur un canevas HTML5
Vous souhaitez maintenant également faire l’inverse : si vous avez une représentation base64 d’une image, comment pouvons-nous charger ces données d’image base64 sur un canevas HTML5 ? Ce n’est pas difficile car nous pouvons simplement créer une image, attribuer les données à cette image, puis dessiner l’image. Voici le code JavaScript pour faire exactement cela.
var myImage = new Image(); myImage.src = imgData; ctx.drawImage(myImage, 0, 0);
La variable imgData contient les données d’image en base64. Si la toile était auparavant vide, vous verrez à nouveau notre image sur la toile. Après cela, vous pouvez à nouveau utiliser toDataURL() pour obtenir les données en représentation base64.
conclusion
Dans ce tutoriel nous avons vu comment prendre l’image qui s’affiche sur un canevas HTML5, comment la transformer en chaîne base64 et comment faire l’inverse : nous avons vu comment charger une image base64 sur un canevas HTML5. Ce que vous faites avec ces chaînes base64 ne dépend que de vous !
Bonne chance dans vos projets de développement Web et bon codage !
Cet article est exact et fidèle au meilleur de la connaissance de l’auteur. Le contenu est uniquement à des fins d’information ou de divertissement et ne remplace pas un conseil personnel ou un conseil professionnel en matière commerciale, financière, juridique ou technique.
sucré le 26 août 2013 :
À Joe Lann,
Assurez-vous que le paramètre mycanvas dans :
var canvas = document.getElementById(‘mycanvas’);
est l’identifiant de votre élément HTML canvas :
id de toile= »ma toile »
Joe Lannen le 08 juillet 2013 :
Et si toDataUrl ne sort que ‘data:’… sans le reste de la chaîne ? J’ai l’image de la toile qui s’ouvre dans une nouvelle fenêtre et elle s’affiche correctement, mais l’URL ne contient aucune donnée, je ne peux donc pas envoyer au serveur. hmm.
Rajeev Kumar Verma le 19 mai 2012 :
association de tous les journaux et magazines
Nous avons le plaisir de vous informer que ‘All Newspapers & Magazines Association’ a été créée sous le patronage de ‘International Media Production Zone’ de India Media City dans le but de : * Fournir une plate-forme solide pour l’industrie de l’édition * Réunir les éditeurs pour discuter des principaux problèmes auxquels l’industrie est confrontée *Définir les politiques pratiques qui feront avancer l’industrie
http://www.ifaaassociation.com/
InduswebiTech de Rama Road, Kirti Nagar, New Delhi, Inde le 6 janvier 2012 :
j’ai essayé ce codage mais ça n’a pas fonctionné .. y a-t-il un éditeur spécial pour html5
Tonne Groeneveld le 18 octobre 2011 :
Je suis désolé mais…
var monImage = nouvelleImage();
monImage.src = imgData;
ctx.drawImage(monImage, 0, 0);
… ne fonctionnera pas de manière fiable. Vous devrez utiliser myImage.onLoad=function(){ctx.drawImage(myImage, 0, 0);} afin que votre Javascript attende que le chargement soit terminé.
