이미지cropping_jquery를 위한 JQuery Jcrop 플러그인

효과는 아래와 같습니다

먼저 "코드 실행"을 통해 실행해 보시고, 실행 후 새로고침하여 느낌을 느껴보세요.

<style type="text/css"> body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat; } .jcrop-vline { height: 100%; width: 1px !important; } .jcrop-hline { width: 100%; height: 1px !important; } .jcrop-handle { font-size: 1px; width: 7px !important; height: 7px !important; border: 1px #eee solid; background-color: #333; *width: 9px; *height: 9px; } .jcrop-tracker { width: 100%; height: 100%; } .custom .jcrop-vline,.custom .jcrop-hline{ background: yellow; } .custom .jcrop-handle{ border-color: black; background-color: #C7BB00; -moz-border-radius: 3px; -webkit-border-radius: 3px; } </style> <img src="/static/imghwm/default1.png" data-src="http://img.jb51.net/jslib/images/flowers.jpg?x-oss-process=image/resize,p_40" class="lazy" id="cropbox" alt="이미지cropping_jquery를 위한 JQuery Jcrop 플러그인" > <a href="http://www.jb51.net/"> </a> 스크립트 홈

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
In 현재 진행 중인 이 프로젝트는 사용자 아바타 기능을 활용하기 위해서는 사용자가 사진을 업로드하고 이미지 크롭 방식을 이용해 아바타를 선택할 수 있으면 좋겠다고 리더님이 말씀하셨습니다. 동료가 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
y2
width

height

$(function(){
//이벤트 처리
$("#demoImage").Jcrop({
onChange:showCoords, //선택 영역이 변경되면 해당 실행 콜백 함수
onSelect:showCoords //영역이 선택되면 해당 콜백 함수를 실행합니다.
})
})
function showCoords(c) {
$(" #txtX1 ").val(c.x); //선택한 영역의 왼쪽 상단 모서리의 가로 좌표를 가져옵니다
$("#txtY1").val(c.y); //왼쪽 상단 모서리의 세로 좌표를 가져옵니다. of the selected Area
$(" #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] ) //선택 영역 설정

다운로드 주소:http: //www.jb51.net/jiaoben/24768.html