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.

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 drawImagey 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:

1. Formularios HTML
2. Cómo escribir texto en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro