Cortar uma imagem em JavaScript usando HTML Canvas
Para recortar uma imagem em JavaScript, podemos usar o elemento HTML canvas. O elemento canvas está disponível em HTML5. Para exibir e recortar a imagem na tela, podemos usar a função drawImage(). A função drawImage() leva no mínimo três parâmetros e no máximo nove parâmetros.
Existe algo chamado contexto com a ajuda do qual podemos desenhar qualquer coisa na tela. Você pode considerá-lo como uma caneta com a qual você pode desenhar sobre a tela. O contexto nos fornece um método chamado drawImage() que desenha o conteúdo na tela. Vamos agora ver o processo passo a passo para cortar uma imagem em JavaScript.
Cortar uma imagem em JavaScript usando o elemento HTML5 canvas
Uma canvas em HTML 5 nada mais é que uma área em branco dentro da qual podemos desenhar o que quisermos. Para adicionar uma tela dentro do código HTML, podemos usar uma tag canvas com um id de canvas, e para este elemento canvas, podemos também especificar suas dimensões (neste caso, largura: 1000px e altura: 500px) do seguinte modo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
No final da tag body, vinculamos nosso arquivo de script dentro do qual escreveremos nosso código JavaScript.
Dentro de nosso JavaScript, criamos uma função chamada cropImg(). Dentro desta função, estamos obtendo o elemento HTML canvas usando document.getElementById() e armazenando-o dentro da variável canvas. Como queremos desenhar uma imagem nesta tela, que é uma imagem bidimensional, primeiro obteremos o contexto do nosso elemento de tela usando a função getContext() e, como um argumento para esta função, passaremos 2d. E para armazenar este contexto, criamos outra variável chamada ctx.
Para saber mais sobre a função getContext() e suas propriedades, você pode visitar e ler os documentos MDN. Neste estágio, é assim que nosso código se parece.
function cropImg(){
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
Agora que temos a tela configurada e o contexto ctx pronto, podemos começar a recortar e desenhar a imagem.
Vamos agora criar uma tag de imagem usando o construtor Image() e armazená-la dentro de uma variável imagem. Em seguida, podemos vincular uma imagem à imagem usando a propriedade src. Para este tutorial, iremos pegar o URL de uma imagem da internet (Unsplash.com) e, em seguida, adicioná-lo à propriedade source como uma string mostrada abaixo.
var image = new Image();
image.src = "https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80";
Para recortar e desenhar a imagem na tela, temos que nos certificar de que nossa imagem já está completamente carregada. Para isso, podemos usar a função onload na imagem. O código escrito dentro desta função só será executado depois que a imagem for completamente carregada.
Como vimos anteriormente neste artigo, o contexto nos fornece uma função chamada drawImage() para desenhar imagens na tela. Temos que passar algumas entradas para esta função dependendo de como queremos a imagem final. Como queremos cortar uma imagem, queremos exibir apenas uma parte específica dessa imagem no navegador e excluir o restante, temos que passar 9 parâmetros para a função drawImage(). E os parâmetros são os seguintes.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parâmetros:
image- A própria imagem que queremos cortar e exibir no navegador.sx(eixo x da imagem de origem) - Este parâmetro diz de onde você deseja recortar ou começar a recortar a imagem a partir do eixo x.sy(eixo y da imagem de origem) - Este parâmetro diz de onde você deseja recortar ou começar a recortar a imagem a partir do eixo y.sWidth- A largura da imagem a partir de sx.sHeight- A altura da imagem a partir de sy.dx- O ponto a partir do qual começar a desenhar a imagem na tela a partir do eixo x.dy- O ponto a partir do qual começar a desenhar a imagem na tela a partir do eixo y.dWidth- Comprimento das imagens que devem ser apresentadas no ecrã.dHeight- A altura das imagens que devem ser apresentadas no ecrã.
A imagem abaixo ilustra os parâmetros sx, sy e sWidth usados para cortar ou cortar a imagem.
Depois de recortar a imagem, para mostrá-la na janela do navegador, usamos os parâmetros dx, dy, dWidth e dHeight.
Agora você pode passar parâmetros para esta função dependendo de como e onde você deseja mostrar a imagem. Neste exemplo, passamos image, 150, 200, 500, 300, 60,60, 500, 300 esses nove valores para nossa função drawImage(). Você pode ajustar esses valores dependendo da saída desejada que você deseja. No final, seu código será parecido com isto. Não se esqueça de chamar a função cropImg() dentro do seu código.
function cropImg(){
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src = "https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80";
image.onload = function(){
ctx.drawImage(image, 150, 200, 500, 300, 60,60, 500, 300);
}
}
cropImg();
Este é todo o procedimento para cortar uma imagem em JavaScript usando o elemento HTML 5 canvas. Esta é a abordagem mais popular e amplamente usada quando se trata de cortar uma imagem em JavaScript.
