이미지cropping_jquery를 위한 JQuery Jcrop 플러그인-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:52:28

원래의

1270명이 탐색했습니다.

효과는 아래와 같습니다
이미지cropping_jquery를 위한 JQuery Jcrop 플러그인
먼저 "코드 실행"을 통해 실행해 보시고, 실행 후 새로고침하여 느낌을 느껴보세요.

<img  src="http://img.jb51.net/jslib/images/flowers.jpg" 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< /label>
y2
width

height<입력 유형 ="text" id="txtHeight" />

$(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