Cambiar el tamaño de la imagen usando HTML Canvas en JavaScript

Los gráficos se utilizan para describir aspectos de las imágenes que son una parte importante de cualquier aplicación web. HTML ofrece dos formas de crear gráficos. El primero es canvas y el otro es SVG. En el artículo de hoy, aprenderemos cómo crear gráficos, especialmente cómo dibujar una imagen en HTML con lienzo y JavaScript.

Cambiar el tamaño de las imágenes por canvas en HTML usando JavaScript

Canvas es un elemento HTML estándar que se utiliza para dibujar gráficos en aplicaciones web. No es más que un área rectangular en la página sin bordes ni contenido. Los usuarios pueden usar esta área rectangular para dibujar gráficos.

Los gráficos renderizados en el lienzo son diferentes de los estilos HTML y CSS normales. Todo el lienzo con todos los gráficos que contiene se trata como un solo elemento DOM.

Métodos de canvas en HTML

1. getContext(): este es un método integrado proporcionado por canvas que devuelve el contexto de dibujo en el lienzo según el contextType. Si el identificador de contexto no es compatible o ya está configurado, se devuelve null. Los tipos de contexto admitidos son 2d, webgl, webgl2 y bitmaprenderer.
2. drawImage(): este es un método integrado proporcionado por canvas que ayuda a dibujar la imagen en el lienzo de varias formas.

Sintaxis de drawImage()

context.drawImage(
    $image, $sx, $sy, $sWidth, $sHeight, $dx, $dy, $dWidth, $dHeight);

Parámetros

• $image: es un parámetro obligatorio que especifica la fuente de la imagen que debe dibujarse en el lienzo. La fuente de la imagen puede ser cualquier cosa como CSSImageValue, HTMLImageElement, SVGImageElement, etc.
• $sx: Es un parámetro opcional que especifica la coordenada X u horizontal de la imagen de origen. Se medirá como un rectángulo desde la esquina superior izquierda para dibujar en la imagen de destino.
• $sy: Es un parámetro opcional que especifica la coordenada Y o vertical de la imagen de origen. Se medirá como un rectángulo desde la esquina superior izquierda para dibujar en la imagen de destino.
• $sWidth: es un parámetro opcional que especifica el ancho de la imagen de origen. Se medirá como un rectángulo desde la esquina superior izquierda para dibujar en la imagen de destino.
• $sHeight: este es un parámetro opcional que especifica la altura de la imagen de origen. Se medirá como un rectángulo desde la esquina superior izquierda para dibujar en la imagen de destino.
• $dx: Es un parámetro obligatorio que especifica la coordenada X u horizontal de la imagen de destino. Se medirá como un rectángulo desde la esquina superior izquierda donde se coloca la imagen de origen.
• $dy: Es un parámetro obligatorio que especifica la coordenada Y o coordenada vertical de la imagen de destino. Se medirá como un rectángulo desde la esquina superior izquierda donde se coloca la imagen de origen.
• $dWidth: este es un parámetro opcional que especifica el ancho de la imagen de destino. Se medirá como un rectángulo desde la esquina superior izquierda. Si no se especifica ningún valor, el ancho predeterminado es el ancho de la imagen de origen.
• $dHeight: Es un parámetro opcional que especifica la altura de la imagen de destino. Se medirá como un rectángulo desde la esquina superior izquierda. Si no se especifica, la altura predeterminada es la altura de la imagen de origen.

Pasos para cambiar el tamaño de la imagen usando JavaScript Canvas

Código de ejemplo:

<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2" width="500" height="400">
<canvas id="canvas" width=1000></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src =
    'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2';

img.onload = function() {
  // set height proportional to destination image
  canvas.height = canvas.width * (img.height / img.width);
  // step 1 - resize to 75%
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  // Set the width & height to 75% of image
  oc.width = img.width * 0.75;
  oc.height = img.height * 0.75;
  // step 2, resize to temporary size
  octx.drawImage(img, 0, 0, oc.width, oc.height);
  // step 3, resize to final size
  ctx.drawImage(
      oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width,
      canvas.height);
}

Producción: