jQuery 이미지 자르기 플러그인 Jcrop_jquery를 간단하게 사용

동료가 Jcrop 플러그인을 추천했습니다. 저는 압축 패키지의 최신 버전을 다운로드하기 위해 공식 웹사이트 http://deepliquid.com/content/Jcrop.html로 이동했습니다. 압축 패키지에는 Jcrop의 여러 데모 파일이 포함되어 있습니다. . 핵심은 Jcrop.js 파일과 jQuery.Jcrop.css 파일입니다. 기본적으로 여러 데모 파일을 참조하여 이 플러그인의 사용법을 배울 수 있습니다. 우연히 저녁에 공부를 조금 하게 되었는데, 지금은 다음과 같이 간략하게 정리하고 있는데, 영어를 잘 못하는 친구들에게도 편리합니다.
플러그인 사용을 위한 필수 조건: jQuery.js 파일 가져오기, jQuery.Jcrop.js 파일 가져오기, JQuery.Jcrop.css 파일 가져오기.
1. 가장 기본적인 사용법
html 코드 부분:

코드 복사 코드는 다음과 같습니다.

js 부분:

코드 복사 코드는 다음과 같습니다.

$(
function()
{
$("#demoImage ").Jcrop() ;
}
);

이 방법으로 이미지를 자를 수 있습니다.
2. 선택한 영역의 좌표와 콜백 함수를 가져옵니다
html 코드 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

;x1
y1
x2< /label>
y2
width
height<입력 유형 ="text" id="txtHeight" />

js 코드 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(
function() {
//이벤트 처리
$("#demoImage").Jcrop(
{
onChange:showCoords, //영역 선택 시 변경 시 해당 콜백 함수 실행
onSelect:showCoords //영역 선택 시 해당 콜백 함수 실행
}
);
}
);
function showCoords(c) {
$("#txtX1").val(c.x); //왼쪽 위 모서리의 가로 좌표를 가져옵니다. 선택한 영역
$("#txtY1").val(c.y); //선택 항목 가져오기 영역의 왼쪽 상단 모서리
$("#txtX2").val(c.x2) ; //선택한 영역의 오른쪽 하단 모서리의 가로 좌표를 가져옵니다.
$("#txtY2").val(c.y2) //선택한 영역의 오른쪽 하단의 세로 좌표를 가져옵니다.
$("#txtWidth").val(c.w); //선택한 영역의 너비를 가져옵니다.
$("#txtHeight").val(c.h) //선택한 영역의 높이를 가져옵니다.
}

3. 공통 옵션 설정 aspectRatio: 선택 영역은 너비/높이 비율을 기준으로 하며 1은 정사각형을 의미합니다.
minSize: 최소 너비 및 높이 값.
maxSize: 최대 너비 및 높이 값입니다.
setSelect: 초기 선택 영역을 설정합니다.
bgColor: 배경색
bgOpacity: 배경 투명도.
allowResize: 선택한 영역의 크기 변경을 허용할지 여부입니다.
allowMove: 선택한 영역 이동을 허용할지 여부입니다.
예:

코드 복사 코드는 다음과 같습니다.

$(
function () {
$("#demoImage").Jcrop({
aspectRatio: 1, //선택한 영역의 가로세로 비율이 1입니다. 즉, 선택한 영역이 정사각형입니다
bgColor:"#ccc", / /자르기 시 배경색은 회색으로 설정
bgOpacity:0.1, //투명도는 0.1로 설정
allowResize:false, //선택한 영역의 크기는 변경 불가
setSelect:[0,0,100,100] //선택 영역 초기화
}
)
}
);

4 .api 사용법

코드 복사 코드는 다음과 같습니다.

var api = $.Jcrop("#demoImage");
api.disable(); //자르기 효과를 비활성화하도록 설정
api.enable() //자르기 효과를 활성화하도록 설정
api.setOptions ({allowResize:false});//해당 구성 설정
api.setSelect([0 ,0,100,100]) //선택 영역 설정