이미지 자르기 기능 구현
요구 사항:
- 그림 그리기 및 이미지 조작을 위한 JavaScript 의 Canvas API 에 대한 이해.
기능:
- 표시된 이미지에 자르기 영역을 추가하고 이 영역을 드래그 가능하게 만듭니다. 이를 통해 사용자는 자르기 원하는 영역을 유연하게 선택할 수 있습니다.
main.js에 관련 메서드를 추가합니다.
-
cutImage 메서드 생성
cutImage 메서드는 주로 두 가지 작업을 담당합니다. 하나는 마스크 레이어를 생성하는 것이고, 다른 하나는 CSS background 속성을 사용하여 선택한 자르기 영역의 실시간 미리보기를 제공하는 것입니다.
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";
},
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";
}
};
},
이 메서드를 이해하려면 다음 핵심 사항을 파악해야 합니다.
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
위의 두 줄의 코드를 통해 마우스와 배경 이미지 사이의 거리를 얻습니다. e.pageX는 마우스에서 브라우저의 왼쪽 가장자리까지의 거리를 나타내고, t.regional.offsetLeft + this.offsetLeft은 이미지에서 브라우저의 왼쪽 가장자리까지의 거리를 계산합니다. 마찬가지로, 상단 거리를 추론할 수 있습니다.
if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )
마우스와 배경 이미지 사이의 거리를 이해했다면, 이것은 이해하기 쉬울 것입니다. 즉, 마우스가 이미지 영역 내에 있는지 여부를 결정합니다.
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
이 두 코드 조각은 강조할 가치가 있습니다. 처음 두 줄은 마지막 스크린샷의 좌표를 기록합니다 (또는 이전 스크린샷이 없으면 초기 좌표). 다음 두 줄은 마우스가 눌렸을 때의 좌표를 기록합니다. 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();
}
위의 코드는 본질적으로 다음과 같습니다. 드래그하는 동안에는 좌표 변경에 따라 t.sx 및 t.sy의 값을 실시간으로 업데이트하고 cutImage 메서드를 호출하여 라이브 미리보기를 제공해야 합니다.
이동 중 자르기 영역의 좌표 = 마지막으로 기록된 위치 + (현재 마우스 위치 - 마우스가 눌렸을 때의 위치)
