Simple use of jQuery image cropping plug-in Jcrop

My colleague recommended the Jcrop plug-in to go to its official site. Basically, you can use this plug-in by referring to several demo files. After studying at night, I would like to briefly summarize the following. It is also convenient for friends who are not good at English.
The following conditions are required for using the plug-in: import the jquery.js file, import the jquery.jcrop.js file, and import the jquery.jcrop.css file.
1. Basic usage
Html code:
Copy codeThe Code is as follows:


Js section:
Copy codeThe Code is as follows:
$ (
Function ()
{
$ ("# DemoImage"). Jcrop ();
}
);

In this way, you can crop the image.
2. Obtain the coordinates of the selected region and the callback function.
The html code is as follows:
Copy codeThe Code is as follows:

<Label> x1 </label> <input type = "text" id = "txtX1"/>
<Label> y1 </label> <input type = "text" id = "txtY1"/>
<Label> x2 </label> <input type = "text" id = "txtX2"/>
<Label> y2 </label> <input type = "text" id = "txtY2"/>
<Label> width </label> <input type = "text" id = "txtWidth"/>
<Label> height </label> <input type = "text" id = "txtHeight"/>

The js Code is as follows:
Copy codeThe Code is as follows:
$ (
Function (){
// Event processing
$ ("# DemoImage"). Jcrop (
{
OnChange: showCoords, // when the selected region changes, execute the corresponding callback function
OnSelect: showCoords // execute the corresponding callback function when the region is selected
}
);
}
);
Function showCoords (c ){
$ ("# TxtX1"). val (c. x); // obtain the abscissa in the upper left corner of the selected area.
$ ("# TxtY1"). val (c. y); // obtain the vertical coordinate in the upper left corner of the selected area.
$ ("# TxtX2"). val (c. x2); // obtain the abscissa in the lower right corner of the selected area.
$ ("# TxtY2"). val (c. y2); // you can obtain the column coordinate in the lower right corner of the selected area.
$ ("# TxtWidth"). val (c. w); // you can specify the width of the selected area.
$ ("# TxtHeight"). val (c. h); // get the height of the selected area
}

3. Set common options
AspectRatio: The width/height ratio of the selected area. The value 1 indicates a square.
MinSize: Minimum width, high value.
MaxSize: maximum width and high value.
SetSelect: Set the initial selected area.
BgColor: Background Color
BgOpacity: Background transparency.
AllowResize: whether to change the size of the selected area.
AllowMove: whether to allow moving the selected area.
Example:
Copy codeThe Code is as follows:
$ (
Function (){
$ ("# DemoImage"). Jcrop ({
AspectRatio: 1, // the width to height of the selected area is 1, that is, the selected area is a square
BgColor: "# ccc", // set the background color to gray when cropping
BgOpacity: 0.1, // set the transparency to 0.1
AllowResize: false, // the size of the selected area cannot be changed.
SetSelect: [100,100,] // initialize the selected area
}
);
}
);

4. api usage
Copy codeThe Code is as follows:
Var api = $. Jcrop ("# demoImage ");
Api. disable (); // set to disable the cropping effect.
Api. enable (); // set to enable cropping Effect
Api. setOptions ({allowResize: false}); // set the corresponding configuration
Api. setSelect ([100,100,]); // you can specify the selected region.