Cómo cambiar el tamaño de la imagen usando el lienzo HTML en 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.