My colleague recommended the Jcrop plug-in and downloaded the latest version of the compressed package to its official site/content/. The compressed package includes several Jcrop demo files, key files and files. Basically, you can learn to use this plug-in by referring to several demo files. I happened to study and study it in the evening. I will summarize it briefly as follows, which is also convenient for friends who are not good at English.
The conditions required to use plug-ins: import files, import files, import files.
1. The most basic method of using
html code part:
Copy the codeThe code is as follows:
<img src="demo_files/" />
js part:
Copy the codeThe code is as follows:
$(
function()
{
$("#demoImage").Jcrop();
}
);
This allows you to crop the picture.
2. Get the coordinates of the selected area and the callback function
The html code part is as follows:
Copy the codeThe code is as follows:
<img src="demo_files/" />
<label>x1</label><input type="text" />
<label>y1</label><input type="text" />
<label>x2</label><input type="text" />
<label>y2</label><input type="text" />
<label>width</label><input type="text" />
<label>height</label><input type="text" />
The js code part is as follows:
Copy the codeThe code is as follows:
$(
function() {
//Event processing
$("#demoImage").Jcrop(
{
onChange:showCoords, // When the selection area changes, execute the corresponding callback function
onSelect:showCoords // When the area is selected, execute the corresponding callback function
}
);
}
);
function showCoords(c) {
$("#txtX1").val(); //Get the horizontal axis of the upper left corner of the selected area
$("#txtY1").val(); //Get the vertical coordinate of the upper left corner of the selected area
$("#txtX2").val(c.x2); //Get the horizontal axis of the lower right corner of the selected area
$("#txtY2").val(c.y2); //Get the vertical coordinate of the lower right corner of the selected area
$("#txtWidth").val(); //Get the width of the selected area
$("#txtHeight").val(); //Get the height of the selected area
}
3. Common options settings
aspectRatio: The selected area is based on the width/height ratio, and is 1 to represent a square.
minSize: the smallest width, high value.
maxSize: The maximum width, high value.
setSelect: Set the initial selected area.
bgColor: Background color
bgOpacity: Background transparency.
allowResize: Whether to allow changing the selected area size.
allowMove: Whether to allow moving the selected area.
As an example:
Copy the codeThe 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, //Set transparency to 0.1
allowResize:false, //The size of the selected area is not allowed to be changed
setSelect:[0,0,100,100] //Initialize the selected area
}
);
}
);
usage
Copy the codeThe code is as follows:
var api = $.Jcrop("#demoImage");
(); //Set to disable the cropping effect
(); //Set to enable cropping effect
({allowResize:false});//Set the corresponding configuration
([0,0,100,100]); //Set the selected area