Cómo imprimir un lienzo en una URL de datos

URL de datosson una función útil proporcionada por los navegadores.

Podemos tener una imagen que en lugar de hacer referencia a un archivo del sistema de archivos, como

<img src="image.png" />

incrusta la imagen en el propio HTML, algo como esto:

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

donde elbasurala parte que está compuesta por letras y números aparentemente aleatorios es muy larga.

Estaba jugando con elAPI de Canvaspara generar una imagen dinámicamente, y me topé con eltoDataURL()método del objeto Canvas:

canvas.toDataURL()

Creo que esto es especialmente útil cuando crea una imagen del lado del servidor y desea servirla en una página web, generada por el lado del servidor.

Todo desde un proceso de Node.js.

En particular, utilizando elpaquete de lienzo npmpodemos inicializar un lienzo:

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

dibujar en él, usando por ejemploctx.fillText('Hello, World!', 50, 100)y luego llamarcanvas.toDataURL()para generar la URL de datos para una imagen que luego podemos agregar al HTML en una cadena, como esta:

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

Puede hacer lo mismo en la interfaz, por supuesto, excepto que ahoracanvasobjeto es una referencia a un<canvas>Elemento HTML al que está dibujando:

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

Descarga mi gratisManual de Node.js


Más tutoriales de nodos: