Cómo imprimir un lienzo en una URL de datos

 

 

 

Como imprimir un lienzo en una url de datos 1

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 canvasobjeto es una referencia a un canvaselemento 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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Como imprimir un lienzo en una url de datos 1
Como imprimir un lienzo en una url de datos 1

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

 

 

Update cookies preferences