Cómo cargar una imagen en un lienzo HTML

 

 

 

Como cargar una imagen en un lienzo html 1

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

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

 

Como cargar una imagen en un lienzo html 1
Como cargar una imagen en un lienzo html 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