Estaba usando el canvas
paquete npm para dibujar una imagen del lado del servidor usando la API Canvas.
Nota: así es como se trabaja con imágenes en un lienzo en Node.js, no en el navegador. En el navegador es diferente.
Cargar la loadImage()
función
const { createCanvas, loadImage } = require('canvas')
Crea el lienzo:
const width = 1200const height = 630const canvas = createCanvas(width, height)const context = canvas.getContext('2d')
Luego llama a loadImage()
, que devuelve una promesa cuando se carga la imagen:
loadImage('./logo.png').then(image = {})
También puedes utilizar, dentro de una función asíncrona:
const image = await loadImage('./logo.png')
Una vez que tengas la imagen, llámala drawImage
y pásala con los parámetros x, y, ancho y alto:
context.drawImage(image, 340, 515, 70, 70)
Tips para principiantes de JavaScript
Tal vez te puede interesar:
- Formularios HTML
- Cómo escribir texto en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
Cómo cargar una imagen en un lienzo HTML
Estaba usando el canvaspaquete npm para dibujar una imagen del lado del servidor usando la API Canvas.
programar
es
https://aprendeprogramando.es/static/images/programar-como-cargar-una-imagen-en-un-lienzo-html-2334-0.jpg
2024-10-18
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