Comment imprimer un canevas sur une URL de données

URL de donnéessont une fonctionnalité utile fournie par les navigateurs.

Nous pouvons avoir une image qui au lieu de référencer un fichier de système de fichiers, comme

<img src="image.png" />

il incorpore l'image dans le HTML lui-même, quelque chose comme ceci:

<img src="data:image/png;base64,iVBORw0KGgoAA…" />

où ledes orduresLa partie composée de lettres et de chiffres apparemment aléatoires est très longue.

Je jouais avec leAPI Canvaspour générer une image dynamiquement, et je suis tombé sur letoDataURL()méthode de l'objet Canvas:

canvas.toDataURL()

Je pense que cela est particulièrement utile lorsque vous créez une image côté serveur et que vous souhaitez la servir dans une page Web, générée côté serveur.

Le tout à partir d'un processus Node.js.

En particulier, en utilisant lepackage npm de toileon peut initialiser un canevas:

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

dessiner dedans, en utilisant par exemplectx.fillText('Hello, World!', 50, 100)puis appelezcanvas.toDataURL()pour générer l'URL de données d'une image que nous pouvons ensuite ajouter au HTML dans une chaîne, comme ceci:

const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

Vous pouvez faire la même chose sur le frontend, bien sûr, sauf maintenant lecanvasobjet est une référence à un<canvas>Élément HTML sur lequel vous dessinez:

const canvas = document.getElementById('canvas')
//…
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

Téléchargez mon gratuitManuel de Node.js


Plus de didacticiels sur les nœuds: