Como cortar uma imagem em javascript usando tela html
Como cortar uma imagem em javascript usando tela html?
A tela é uma área em branco na qual o usuário pode executar qualquer tarefa em relação à imagem. JavaScript fornece o drawImage () Método para cortar uma imagem. O método é utilizado para escalar uma imagem em elementos de tela. Este método funciona da mesma forma que retangular, especificando o tamanho e a localização da imagem.
A sintaxe do método drawImage () é fornecida abaixo:
Sintaxe
drawimage (img, src_x, sy, swid, shei, dx, dy, dwid, dhei);Os parâmetros são explicados como abaixo:
Parâmetros Descrição
| img | Especifica a imagem (através da tag) a ser cortada e exibida no navegador. |
| src_x | Especifica o início do corte da imagem de origem do eixo x. |
| src_y | Indica o início do corte da imagem de origem do eixo y. |
| Swid | Identifica a largura da imagem. |
| Shei | Representa a altura da imagem. |
| dx | Especifica o ponto iniciado do eixo x para desenhar. |
| dy | Especifica o ponto iniciado do eixo y para desenhar. |
| dwid | Representa a largura da imagem a ser exibida. |
| dhei | Representa a altura da imagem a ser exibida. |
Vamos praticar o método drawimage () para cortar uma imagem usando tela html em javascript.
Exemplo
Um exemplo é considerado para cortar uma imagem em JavaScript, empregando a tela HTML. O exemplo consiste em seções de código HTML e JavaScript. Essas seções são discutidas da seguinte forma.
Código HTML
"https: // cdn.Pixabay.com/foto/2022/08/15/12/47/MOTH-7387787__340.jpg ">
A descrição do código é a seguinte:
- Um A tag é utilizada especificando dimensões contendo largura e altura.
- A Url de uma imagem da web é atribuída a src.
- Depois disso, o elemento HTML Canvas é utilizado para exibir a imagem cortada no navegador.
- No final, o arquivo JavaScript teste.JS está ligado dentroTag.
Código JavaScript
janela.OnLoad = function ()var iMg = documento.getElementById ("flor");
Var Canvas = documento.getElementById ("can_id");
Var Context = Canvas.getContext ("2D");
contexto.drawimage (IMG, 10, 10);
;
Neste código:
- Em primeiro lugar, o “janela.carregando”O evento é empregado para verificar se a página da web está pronta para exibir.
- Além disso, o getElementById A propriedade é utilizada para extrair a imagem e o id de tela por “flor" e “Can_id”.
- Depois disso, o getContext () O método é usado para mostrar o desenho da tela como um “2d" superfície.
- finalmente, o drawImage () O método é empregado para desenhar uma nova imagem. Além disso, x e y coordenadas são passados 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 na janela do navegador.
Conclusão
Em JavaScript, o drawImage () O método é utilizado com três argumentos para cortar uma imagem, utilizando o elemento HTML Canvas. O método aceita uma variedade de argumentos, mas apenas o Referência de imagem, altura, e largura são utilizados para cortar uma imagem. O getElementById Também desempenha um papel fundamental na recuperação do elemento de imagem. Este artigo demonstra vários métodos para cortar uma imagem em JavaScript usando a tela HTML.