JQuery Jcrop plug-in for image cropping_jquery

The effect is as shown below

Please "Run Code" to try running it first, and please refresh it after running to get a feel for it:

<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/imghw/default1.png" data-src="http://img.jb51.net/jslib/images/flowers.jpg" class="lazy" id="cropbox" alt="JQuery Jcrop plug-in for image cropping_jquery" > <a href="http://www.jb51.net/"> </a> Script Home

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]
In this project currently being done To use the user avatar function, the leader said it would be best if the user uploads a picture and can use the image cropping method to select the avatar. A colleague recommended the Jcrop plug-in. Go to its official site http://deepliquid.com/content/Jcrop.html. If the Internet speed is too slow, please click here to download. Downloaded the latest version of the compressed package, which includes several demo files of Jcrop, the key Jcrop.js file and jQuery.Jcrop.css file. Basically, you can learn to use this plug-in by referring to its several demo files. I happened to study a little bit in the evening, and now I briefly summarize it as follows, which is also convenient for friends who are not good at English. Necessary conditions for using the plug-in: import the jQuery.js file, import the jQuery.Jcrop.js file, and import the JQuery.Jcrop.css file.

1. The most basic usage

html code part: Copy code

The code is as follows :

js part: Copy code

The code is as follows:


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

}
);

This way you can crop the image.
2. Get the coordinates of the selected area and the callback function

The html code part is as follows: Copy code

The code is as follows:



x1
y1
x2< /label>
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