Implementar o Mecanismo de Corte (Cropping)
Requisitos:
- Familiaridade com a API Canvas em JavaScript para desenho e manipulação de imagens.
Funcionalidade:
- Adicionar uma região de corte na imagem exibida e tornar essa região arrastável. Isso oferece aos usuários a flexibilidade de selecionar a área desejada para cortar.
Adicione os métodos relevantes em main.js.
-
Crie um método cutImage
O método cutImage é principalmente responsável por duas tarefas: uma é criar uma camada de máscara, e a outra é usar a propriedade CSS background para fornecer uma visualização em tempo real da área de corte selecionada.
cutImage: function () {
var t = this;
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = "block";
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;
var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect(0, 0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
document.getElementById("show_edit").style.background =
"url(" + t.imgUrl + ")" + -t.sx + "px " + -t.sy + "px no-repeat";
document.getElementById("show_edit").style.height = t.sHeight + "px";
document.getElementById("show_edit").style.width = t.sWidth + "px";
},
- Crie um método
drag
drag: function () {
var t = this;
var draging = false;
var startX = 0;
var startY = 0;
document.getElementById("cover_box").onmousemove = function (e) {
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
if (
pageX > t.sx &&
pageX < t.sx + t.sWidth &&
pageY > t.sy &&
pageY < t.sy + t.sHeight
) {
this.style.cursor = "move";
this.onmousedown = function () {
draging = true;
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
};
window.onmouseup = function () {
draging = false;
};
if (draging) {
if (t.ex + (pageX - startX) < 0) {
t.sx = 0;
} else if (t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
t.sx = t.imgWidth - t.sWidth;
} else {
t.sx = t.ex + (pageX - startX);
}
if (t.ey + (pageY - startY) < 0) {
t.sy = 0;
} else if (t.ey + (pageY - startY) + t.sHeight > t.imgHeight) {
t.sy = t.imgHeight - t.sHeight;
} else {
t.sy = t.ey + (pageY - startY);
}
t.cutImage();
}
} else {
this.style.cursor = "auto";
}
};
},
Para entender este método, você precisa entender os seguintes pontos-chave:
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Com as duas linhas de código acima, obtemos a distância entre o mouse e a imagem de fundo. e.pageX representa a distância do mouse para a borda esquerda do navegador, e t.regional.offsetLeft + this.offsetLeft calcula a distância da imagem para a borda esquerda do navegador. Da mesma forma, a distância superior pode ser deduzida.
if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )
Tendo entendido a distância entre o mouse e a imagem de fundo, isso deve ser fácil de entender: ele determina se o mouse está dentro da região da imagem.
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Esses dois trechos de código valem a pena destacar. As duas primeiras linhas registram as coordenadas da última captura de tela (ou, se não houve uma anterior, então as coordenadas iniciais); as duas linhas seguintes registram as coordenadas quando o mouse é pressionado. Você pode inspecionar esses valores separadamente usando console.log().
if (draging) {
if (t.ex + (pageX - startX) < 0) {
t.sx = 0;
} else if (t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
t.sx = t.imgWidth - t.sWidth;
} else {
t.sx = t.ex + (pageX - startX);
}
if (t.ey + (pageY - startY) < 0) {
t.sy = 0;
} else if (t.ey + (pageY - startY) + t.sHeight > t.imgHeight) {
t.sy = t.imgHeight - t.sHeight;
} else {
t.sy = t.ey + (pageY - startY);
}
t.cutImage();
}
O código acima essencialmente diz: se estamos no meio do arrastar, precisamos atualizar os valores de t.sx e t.sy em tempo real com base nas mudanças de coordenadas e chamar o método cutImage para fornecer uma visualização ao vivo.
As coordenadas da área de corte durante o movimento = última posição registrada + (posição atual do mouse - posição quando o mouse foi pressionado)
