Las URL de datos son 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" /
Incorpora la imagen en el propio HTML, algo así:
img /
donde la parte basura que está compuesta por letras y números aparentemente aleatorios es muy larga.
Estaba jugando con la API de Canvas para generar una imagen dinámicamente y me topé con el toDataURL()
método del objeto Canvas:
canvas.toDataURL()
Creo que esto es especialmente útil cuando creas una imagen del lado del servidor y quieres servirla en una página web generada por el lado del servidor.
Todo desde un proceso Node.js.
En particular, utilizando el paquete npm canvas podemos inicializar un canvas:
const { createCanvas, loadImage } = require('canvas')const canvas = createCanvas(200, 200)const ctx = canvas.getContext('2d')
dibujar en él, usando por ejemplo ctx.fillText('Hello, World!', 50, 100)
y luego llamar canvas.toDataURL()
para generar la URL de datos para una imagen que luego podemos agregar al HTML en una cadena, de esta manera: Comprar freidoras baratas para casa e industriales
const imageHTML = 'img src="' + canvas.toDataURL() + '" /'
Por supuesto, puedes hacer lo mismo en el frontend, excepto que ahora el canvas
objeto es una referencia a un canvas
elemento HTML en el que estás dibujando:
const canvas = document.getElementById('canvas')//…const imageHTML = 'img src="' + canvas.toDataURL() + '" /'
Tips de Node.js
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo imprimir un lienzo en una URL de datos
Podemos tener una imagen que en lugar de hacer referencia a un archivo del sistema de archivos, como Las URL de datos son una función útil proporcionada por
programar
es
https://aprendeprogramando.es/static/images/programar-como-imprimir-un-lienzo-en-una-url-de-datos-2285-0.jpg
2024-11-05
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente