Enregistrement des données vers fichier image toile

Original: http://www.nihilogic.dk/labs/canvas2image/

 

Canvas2Image v0.1

Commentaires : cliquez ici

Il s’agit d’une petite bibliothèque qui vous permet d’enregistrer facilement un élément canvas WHATWG comme un imagefile.
Fichiers nécessaires : canvas2image.js, base64.js

Tracer sur la toile avec les jolies boîtes ci-dessous à l’aide de la souris, puis cliquez sur les boutons « Convertir » pour convertir en une image téléchargeable – ou les boutons « Enregistrer » pour télécharger le fichier image directement.
À l’aide de l’élément canvas WHATWG, vous pouvez créer toutes sortes de graphiques cool côté client à la volée à l’aide de Javascript. Cependant, l’image de la toile ne peut pas simplement être enregistré pour que n’importe quelle autre image disque.

Heureusement, il y a une fonction propre sur le l’objet canvas appelé toDataURL(). Ce fonctionne encode les données de l’image au format PNG codées en base64 et retourne comme une donnée : URI.

vue plaincopy à clipboardprint ?

Autres formats que PNG sont pris en charge par certains navigateurs en ajoutant un argument à l’appel de toDataURL(), qui contient le type mime du format souhaité.

vue plaincopy à clipboardprint ?

Il ressemble à Opera et Safari prend uniquement en charge les PNG, tandis que Firefox supporte au moins PNG et JPEG.

Maintenant, à l’aide de cette chaîne de données, nous pouvons coller dans un élément <img>ou nous pouvons le servir directement dans le navigateur et forcez-la à télécharger l’image en remplaçant le type MIME.

C’est fondamentalement ce que cette petite bibliothèque. Les fonctions suivantes sont fournies :

vue plaincopy à clipboardprint ?

Donc, vous avez peut-être remarqué la fonction saveAsBMP. Depuis BMP n’est pas pris en charge par l’un des navigateurs (et j’avais envie de perdre un après-midi), soutien BMP a été ajouté en utilisant la méthode getImageData(), qui nous a permis de lire les données de pixel brutes de la toile.

En utilisant ces données, nous pouvons mettre en place une structure de fichier BMP (ce qui est vraiment simple d’image par rapport à la plupart des autres formats), base64 Encoder tout et créer nos propres données : URI.
La méthode getImageData() est uniquement disponible dans Firefox, Opera beta et Safari en utilisant le WebKit plus tard tous les soirs. Pour des images plus grandes, il peut prendre plusieurs secondes pour coder l’image en BMP, mais pour petites toiles, il semble très bien et rapide.
Questions et compatibilité

  • Fonctionne uniquement dans les navigateurs compatibles sur la toile. Safari uniquement avec le WebKit plus tard tous les soirs).
  • Je ne suis pas très bien avec Safari et je n’arrive pas à télécharger correctement le fichier. On dirait un problème de nom de fichier ? Faites un clic droit + enregistrer-comme sur l’image convertie semble fonctionner très bien.
  • Il serait vraiment bien si en quelque sorte un nom de fichier peut être attaché aux données, mais je n’ai trouvé aucun moyen de le faire. Pour l’instant, vous devez spécifier le nom du fichier vous-même.
  • Puisque btoa() n’est compatible qu’avec Firefox, nous mettons en œuvre le codage base64 en utilisant ces fonctions faites par Masanao Izumo