Simple use of jQuery image cropping plug-in Jcrop_jquery

A colleague recommended the Jcrop plug-in. I went to its official website http://deepliquid.com/content/Jcrop.html to download the latest version of the compressed package. The compressed package includes several demo files of Jcrop. The key ones are 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
y2
width
height

The js code part is as follows:

Copy code The code is as follows:

$(
function() {
//Event processing
$("#demoImage").Jcrop(
{
onChange:showCoords, //When selecting an area When it changes, execute the corresponding callback function
onSelect:showCoords //When the area is selected, execute the corresponding callback function
}
);
}
);
function showCoords(c) {
$("#txtX1").val(c.x); //Get the abscissa coordinate of the upper left corner of the selected area
$("#txtY1").val(c.y); //Get the selection The ordinate of the upper left corner of the area
$("#txtX2").val(c.x2); //Get the abscissa of the lower right corner of the selected area
$("#txtY2").val(c.y2); //Get the ordinate of the lower right corner of the selected area
$("#txtWidth").val(c.w); //Get the width of the selected area
$("#txtHeight").val(c.h); // Get the height of the selected area
}

3. Common option settings
aspectRatio: The selected area is based on the width/height ratio, 1 means square.
minSize: minimum width and height values.
maxSize: the maximum width and height value.
setSelect: Set the initial selected area.
bgColor: Background color
bgOpacity: Background transparency.
allowResize: Whether to allow changing the size of the selected area.
allowMove: Whether to allow moving the selected area.
For example:

Copy code The code is as follows:

$(
function () {
$("#demoImage").Jcrop({
aspectRatio: 1, //The aspect ratio of the selected area is 1, that is, the selected area is a square
bgColor:"#ccc", / /The background color is set to gray when cropping
bgOpacity:0.1, //The transparency is set to 0.1
allowResize:false, //The size of the selected area is not allowed to change
setSelect:[0,0,100,100] //Initialization Selected area
}
);
}
);

4.api usage

Copy code The code is as follows:

var api = $.Jcrop("#demoImage");
api.disable(); / /Set to disable the cropping effect
api.enable(); //Set to enable the cropping effect
api.setOptions({allowResize:false});//Set the corresponding configuration
api.setSelect([0 ,0,100,100]); //Set the selected area