Cómo cargar una imagen en un lienzo HTML

Estaba usando elcanvasnpm para dibujar una imagen del lado del servidor utilizando la API de 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.

Carga elloadImage()función

const { createCanvas, loadImage } = require('canvas')

Crea el lienzo:

const width = 1200
const height = 630

const canvas = createCanvas(width, height) const context = canvas.getContext(‘2d’)

Luego llameloadImage(), que devuelve una promesa cuando se carga la imagen:

loadImage('./logo.png').then(image => {

})

También puede usar, dentro de una función asincrónica:

const image = await loadImage('./logo.png')

Una vez que tenga la imagen, llamedrawImagey pasarlo con los parámetros x, y, ancho y alto:

context.drawImage(image, 340, 515, 70, 70)

Más tutoriales de js: