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.