skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 4 février 2012

Enregistrement du contenu d'un canvas HTML5

Publié par Infinite Loop, à 10 h 10 2 commentaires

Dans les dernières semaines, je me suis plongé dans différentes expérimentations pour découvrir le potentiel du canvas HTML5 :

  • Canvas 2D en 10 étapes faciles / barres de calibrage d'un téléviseur (cours 101)
  • Logo de Radio-Canada (arcs de cercles)
  • Dessiner une spirale (radians)
  • Dessiner un coeur (arcs)
  • Emblème de Montréal (translations, arcs, rotation, clonage du canvas, courbes quadratiques)
C'était intéressant à faire mais pour que ça soit pratique, il restait à découvrir comment enregistrer le résultat de mon travail. Heureusement, c'est assez simple puisque ça se limite à une seule ligne de code.

Si je reprends n'importe quel de mes exemples, il suffit d'ajouter la ligne suivante à la toute fin :
var data = canvas.toDataURL();
Cette fonction du canvas enregistrera dans la variable data le contenu de l'image, par défaut sous forme de PNG. Il restera ensuite à décider ce qu'on en fera.

En regardant de plus près son contenu, on voit que la valeur peut être assez longue.
data:image/png;base64,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
Ce qui est important à retenir :
  • data:image/png : indique le mime type du contenu
  • suivi du contenu encodé en base64 pour éviter les caractères spéciaux dans l'URL

Maintenant que l'image est contenue dans l'URL, que peut-on faire ?

1. Barre d'adresse

Il est possible de copier la valeur du dataURL et la coller directement dans la barre d'adresse. Cliquer Enter et si votre fureteur est compatible (exemple : Firefox, Chrome), vous devriez voir l'image telle qu'elle a été dessinée originalement dans le canvas. C'est important de comprendre que ce ne sont pas les instructions JavaScript qui sont exécutées de nouveau mais bel et bien l'image PNG, telle qu'elle aurait été prise par un imprimé d'écran (de la grandeur définie par les propriétés du canvas).

2. Dans une balise <img>

C'est aussi possible d'utiliser la valeur comme source d'une balise <img> au lieu de pointer vers un nom de fichier. Ça peut se faire lors de manipulations du DOM par le JavaScript (imaginez avec jQuery : $('#myImageTag').attr('src', data)). Sinon, pourquoi ne pas conserver l'URL dans une base de données en vue d'une récupération future ou juste créer un fichier physique sur le serveur à partir de la source base64 ?

3. Enregistrer l'image avec Firefox

Firefox possède une fonctionnalité native permettant d'enregistrer l'image directement à partir du canvas à l'aide du menu contextuel (click droit sur le canvas, Save Image As).

Pour terminer, j'avais déjà noté avec l'éditeur RTE de Blogger (à partir de Firefox) qu'il est possible de glisser une image de mon PC vers la boîte d'édition (en mode composition / WYSIWYG) pour l'inclure dans un billet. L'image n'est pas transférée sur le serveur en tant que fichier, c'est plutôt le base64 du contenu du PNG qui est copié en texte dans la source d'une balise <img> (tel que décrit au point 2). Autrement dit, si un site web ne me permettait pas de transférer ou d'héberger une image sur ses serveurs mais que certaines balises HTML étaient permises, je pourrais soit faire un hotlink vers une image d'un serveur tiers, soit tenter d'inclure une image par sa source texte/base64 (à condition que le champ de sa base de données soit suffisamment grand pour la stocker, par exemple un champ text versus une limite de 500 caractères sur un varchar). C'est à essayer.


Tags: HTML, JavaScript

2 réponses à "Enregistrement du contenu d'un canvas HTML5"

  1. Anonyme a dit...
    28 février 2012 à 02 h 19

    Sans doute moyen aussi, avec un coup d'Ajax, de l'envoyer vers un serveur qui l'enregistrera sur un disque dur pour sauvegarder... a toutes fins utiles

    En tout cas, très intéressant (comme d'hab)

    Anonyme a dit...
    3 avril 2015 à 20 h 33

    Merci ! ;)


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ▼  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ▼  février 2012 (15)
        • Un dernier souffle pour mon iPod Touch
        • Zend_Date me fait perdre mon temps avec l'heure d'été
        • Aucun ingrédient imprononçable
        • L'affaire est ketchup
        • Citation no. 146 sur le guitariste
        • Personnage le plus vulgaire de tous les temps
        • Le piège des design patterns
        • Convertir une image couleur à grayscale avec le ca...
        • Mettre sa vie sur pause pendant un moment
        • Quoi faire quand le VPN nous déconnecte après 3 mi...
        • Effet miroir sur une image avec le canvas HTML5
        • Ces imbéciles qui veulent voir la vie en 3D
        • Citation no. 145 sur les langages de programmation
        • Créer un fichier image à partir du dataURL avec PHP
        • Enregistrement du contenu d'un canvas HTML5
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft