Como redimensionar a imagem usando tela html em javascript

No JavaScript, a redimensionamento da imagem desempenha um papel importante em tornar a página da web mais interativa. Ao redimensionar, as imagens podem ser colocadas em qualquer local desejado em uma página da web. Para esse fim, o html elemento fornece uma característica de redimensionar imagens com a integração do código JavaScript. Este elemento é aplicável para desenhar gráficos, incluindo animação, plotagem de gráficos e muito mais. Além disso, os usuários podem especificar as dimensões da imagem redimensionada. O artigo demonstra como redimensionar uma imagem usando a tela HTML via JavaScript.

Como redimensionar uma imagem usando tela html em javascript?

O html O elemento é utilizado para desenhar gráficos em diferentes aspectos. É útil para animação, plotando gráficos e combina fotos. Além disso, os usuários podem redimensionar a imagem fornecendo dimensões específicas. Ele não muda a imagem original, mas cria uma nova imagem cortada ou redimensionada. Para esse fim, o drawImage () O método é utilizado para escalar a imagem em elementos de tela.

A implementação prática de redimensionar a imagem é dividida em dois arquivos separados, i.e., HTML e JavaScript.

Código HTML

"https: // cdn.Pixabay.com/foto/2020/02/26/08/59/fireworks-4881190__340.jpg "
>

A descrição do código é fornecida aqui:

• Primeiro, um URL de imagem é fornecido especificando largura e altura com Tag.
• Depois disso, html é ajustado pelo redimensionamento do largura e altura da imagem.
• No final, um javascript “teste.JS”Está ligado ao fornecer a fonte.

Código JavaScript

janela.OnLoad = function ()
var iMg = documento.getElementById ("fogo");
Var Canvas = documento.getElementById ("Can");
Var Context = Canvas.getContext ("2D");
contexto.drawimage (IMG, 10, 10);
;

Neste código JavaScript:

• Em primeiro lugar, o “janela.carregando”O evento é utilizado para verificar se a página da web estiver pronta para exibir.
• Depois disso, getElementById A propriedade é empregada para extrair os IDs de imagem e tela por “fogo" e "pode”.
• Depois disso, o getContext () O método é usado para mostrar o desenho da tela, passando um “2d" superfície.
• No final, o drawImage () O método é utilizado para desenhar uma nova imagem. Além disso, x e y As coordenadas são especificadas como “10" e "10”Para colocar a imagem na tela.

Saída

A saída mostra que a imagem completa é redimensionada aplicando o drawImage () Método no HTML . A parte direita da tela acima representa a parte redimensionada da imagem.

Conclusão

JavaScript fornece a drawImage () Método para redimensionar a imagem empregando o HTML . O método toma a entrada como as alturas e larguras da imagem existente. Depois disso, um fator de redimensionamento é aplicado para desenhar uma nova imagem com base nas alturas e larguras fornecidas. Além disso, os usuários podem especificar as imagens da Web para redimensionar via JavaScript. Nesta postagem, os usuários aprenderam a redimensionar a imagem com base no HTML . Possui várias aplicações em lojas de compras on -line, sites de jogos, etc.