Cómo cambiar el tamaño de la imagen usando el lienzo HTML en JavaScript

En JavaScript, el cambio de tamaño de la imagen juega un papel importante en hacer que la página web sea más interactiva. Al cambiar el tamaño, las imágenes se pueden colocar en cualquier lugar deseado en una página web. Para este propósito, el HTML El elemento proporciona una característica de cambiar el tamaño de las imágenes con la integración del código JavaScript. Este elemento es aplicable para gráficos de dibujo, que incluyen animación, trazado de gráficos y muchos más. Además, los usuarios pueden especificar las dimensiones de la imagen redimensionada. El artículo demuestra cómo cambiar el tamaño de una imagen utilizando el lienzo HTML a través de JavaScript.

Cómo cambiar el tamaño de una imagen usando el lienzo HTML en JavaScript?

El html El elemento se utiliza para dibujar gráficos en diferentes aspectos. Es útil para la animación, trazar gráficos y combinar fotos. Además, los usuarios pueden cambiar el tamaño de la imagen proporcionando dimensiones específicas. No cambia la imagen original, pero crea una nueva imagen recortada o redimensionada. Para este propósito, el DrawImage () El método se utiliza para escalar la imagen en elementos de lona.

La implementación práctica del cambio de tamaño de la imagen se divide en dos archivos separados, yo.mi., HTML y JavaScript.

código HTML

"https: // cdn.pixabay.com/Photo/2020/02/26/08/59/Fireworks-4881190__340.JPG "
>

La descripción del código se proporciona aquí:

• Primero, se proporciona una URL de imagen especificando ancho y altura con etiquetas.
• Después de eso, html se ajusta al cambiar el tamaño del ancho y altura de la imagen.
• Al final, un JavaScript "prueba.js"Está vinculado al proporcionar la fuente.

Código JavaScript

ventana.onload = function ()
var img = documento.getElementById ("Fuego");
Var Canvas = documento.getElementById ("Can");
contexto var = lienzo.getContext ("2d");
contexto.Drawimage (img, 10, 10);
;

En este código JavaScript:

• En primer lugar, el "ventana.encendidoEl evento se utiliza para verificar si la página web está lista para mostrar.
• Después, GetElementByid La propiedad se emplea para extraer la imagen y las identificaciones de lienzo por "fuego" y "poder".
• Después de eso, el getContext () El método se utiliza para mostrar el dibujo en el lienzo pasando un "2D" superficie.
• Al final, el DrawImage () El método se utiliza para dibujar una nueva imagen. Además, X y Y Las coordenadas se especifican como "10" y "10"Para colocar la imagen en el lienzo.

Producción

La salida muestra que la imagen completa se redimensiona aplicando el DrawImage () Método en el HTML . La parte correcta de la pantalla anterior representa la parte redimensionada de la imagen.

Conclusión

JavaScript proporciona un DrawImage () Método para cambiar el tamaño de la imagen empleando el HTML . El método toma la entrada como las alturas y anchos de la imagen existente. Después de eso, se aplica un factor de cambio de tamaño para dibujar una nueva imagen basada en las alturas y anchos proporcionados. Además, los usuarios pueden especificar las imágenes web para cambiar el tamaño a través de JavaScript. En esta publicación, los usuarios han aprendido a cambiar el tamaño de la imagen en función de HTML . Tiene varias aplicaciones en tiendas de compras en línea, sitios de juegos, etc.