Como cortar uma imagem em javascript usando tela html

O elemento HTML Canvas é famoso por realizar manipulações com imagens. Ele pode executar vários recursos relacionados a imagens, como corte, redimensionar, zoomar, zoomar, e assim por diante. O corte de uma imagem é essencial para remover as partes desnecessárias de uma imagem. Por exemplo, o JavaScript fornece funcionalidade integrada pelo drawImage () Método para cortar uma imagem e exibi -la em um elemento de tela. Este artigo demonstra a implementação prática de cortar uma imagem em JavaScript usando a 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.