Jcrop Basic Parameters List _jquery

Jcrop original download page: Punch here

The basic use method is as follows:

Insert the relevant CSS and JS files in the head section (between

<link rel= "stylesheet" href= "Css/jquery". Jcrop.css ">
<script src= "Js/jquery.js" ></script>
<script src= "Js/jquery. Jcrop.js "></script>

Second, the head part of the insert callback function and other related processing parameters.

Copy Code code as follows:

<script language= "Javascript" >
<!--
JQuery (function ($) {
Create variables to hold the API and image size
var jcrop_api, Boundx, Boundy;

$ (' #cropbox '). Jcrop ({
MinSize: [0,0],
maxsize:[0,0],
Setselect: [0,0,0,0],
boxwidth:800,
borderopacity:0.3,
Keysupport:false,
Dragedges:false,
Allowselect:false,
Allowresize:false,
bgopacity:0.2,
boundary:0,
Allowmove:false,
AddClass: ' Jcrop-handle ',
Onselect:updatecoords,
},
function () {
Use the APIs to get the real image size
var bounds = This.getbounds ();
Boundx = Bounds[0];
Boundy = bounds[1];
Store the API in the JCROP_API variable
Jcrop_api = this;
});
function Updatecoords (c)
{
$ (' #x '). Val (c.x);
$ (' #y '). Val (C.Y);
$ (' #w '). Val (C.W);
$ (' #h '). Val (c.h);
};
function Checkcoords ()
{
if (parseint (' #w '). Val ()) return true;
Alert (' Please select the cropping area ');
return false;
};
});
-->
</script>

Third, the relevant picture plus ID to identify.

This can achieve the simplest cutting effect, as to how to combine PHP and other dynamic statements processing pictures, in the top of the article has been given an example.

The following table gives the basic options parameter settings:

name	Default Value	Description
Allowselect	True	Allow New Marquee
Allowmove	True	Allow marquee Movement
Allowresize	True	Allow marquee scaling
Trackdocument	True
BaseClass	"Jcrop"	The underlying style name prefix. Description: class= "Jcrop-holder", change is just one of the jcrop.
AddClass	Null	Adding a style will. Example: If the value is "test", then the style is added to class= "Test Jcrop-holder"
BgColor	"Black"	Background color. Color keywords, HEX, RGB can be.
Bgopacity	0.6	Background transparency
Bgfade	False	Use background transition effects
Borderopacity	0.4	Marquee Border Transparency
Handleopacity	0.5	Zoom button Transparency
Handlesize	9	Zoom button Size
Handleoffset	5	The distance between the Zoom button and the border
Aspectratio	0	Marquee width/height ratio. Description: Width/height
Keysupport	True	Keyboard control is supported. Key list: Up and Down (move), ESC (cancel), Tab (jump out of the cropping box, to the next)
Cornerhandles	True	Allow Corner scaling
Sidehandles	True	Allow four-quad scaling
Drawborders	True	Draw Border
Dragedges	True	Allow dragging borders
Fixedsupport	True
Touchsupport	Null
Boxwidth	0	Canvas width
Boxheight	0	Canvas height
Boundary	2	Boundary. Description: You can drag the mouse from the boundary to select the cropping area
Fadetime	400	Time of excessive effect
Animationdelay	20	Animation delay
Swingspeed	3	Transition speed
Minselect	[0,0]	Select the minimum size of the selection box. Note: If the selection box is less than this size, automatically deselect
MaxSize	[0,0]	Marquee Maximum Size
MinSize	[0,0]	Marquee Minimum Size
OnChange	function () {}	Events when the marquee changes
Onselect	function () {}	Events when the marquee is selected
Onrelease	function () {}	Events when the marquee is canceled

The following table is the API method

name	Description
SetImage (String)	Set (or change) the image. Example: Jcrop_api.setimage ("Newpic.jpg")
SetOptions (object)	Set (or change) the parameter, the format is the same as the initialization setting parameter
Setselect (Array)	Create marquee, parameter format: [X,y,x2,y2]
Animateto (Array)	Create a marquee with an animation effect, with the parameter format: [X,y,x2,y2]
Release ()	Cancel Marquee
Disable ()	Disables Jcrop. Note: An existing marquee is not cleared.
Enable ()	Enable Jcrop
Destroy ()	Remove Jcrop
Tellselect ()	Gets the value of the marquee (the actual size). Example: Console.log (Jcrop_api.tellselect ())
Tellscaled ()	Gets the value of the marquee (interface size). Example: Console.log (jcrop_api.tellscaled ())
GetBounds ()	Get the actual size of the picture, in the format: [W,h]
Getwidgetsize ()	Get picture display size, in the format: [W,h]
Getscalefactor ()	Gets the scale of the picture scale, in the format: [W,h]