The use of JQuery Jcrop plugin

A picture of jquery cuts a plugin that uses plugins must condition: introduce Jquery.js file, introduce jQuery.Jcrop.js file, introduce JQuery.Jcrop.css file 1. The most basic way to use:

js section: $ (    function()    {       $ ("#demoImage"). Jcrop ();    })

2. Get the coordinates of the selected area and the callback function
The HTML code section is as follows:

 <label>x1</label><input type= "text" id= " TxtX1 "/> <label>y1</label><input type=" text "id=" txtY1 "/> <label>x2</label><in Put type= "text" id= "txtX2"/> <label>y2</label><input type= "text" id= "txtY2"/> <label>wi Dth</label><input type= "text" id= "TxtWidth"/> <label>height</label><input type= "text" ID = "TxtHeight"/>JS section: $ (function() {                //Event Handling$ ("#demoImage"). Jcrop ({onchange:showcoords,//executes the corresponding callback function when the selection area changesOnselect:showcoords//when the region is selected, the corresponding callback function is executed                }                );            }        ); functionShowcoords (c) {$ ("#txtX1"). Val (c.x);//To get the upper left corner of the selected area$ ("#txtY1"). Val (C.Y);//To get the upper left corner of the selected area ordinate$ ("#txtX2"). Val (c.x2);//get the lower right corner of the selected area horizontal$ ("#txtY2"). Val (c.y2);//get the bottom right corner of the selected area ordinate$ ("#txtWidth"). Val (C.W);//gets the width of the selected area$ ("#txtHeight"). Val (c.h);//get the height of the selected area}

3. Common Options settings
Aspectratio: The area is selected by width/height ratio, and the square is 1.
MinSize: Minimum width, high value.
MaxSize: Maximum width, high value.
Setselect: Sets the initial selected area.
BgColor: Background color
Bgopacity: Background transparency.
Allowresize: Allows you to change the size of the selected area.
Allowmove: Whether the selected area is allowed to be moved.
Examples are as follows:

$(function() {                                $("#demoImage"). Jcrop ({aspectratio:1,//The selected area aspect ratio is 1, that is, the selected area is a squareBgColor: "#ccc",//set background color to gray when croppingbgopacity:0.1,//transparency set to 0.1Allowresize:false,//changing the size of the selected area is not allowedSETSELECT:[0,0,100,100]//Initialize the selected area                            }                        ); }        ); 

The use of JQuery Jcrop plugin