JQuery Jcrop Image Clipping source

Jcrop is a powerful jQuery image cropping plugin that combines a back-end program (for example, PHP) to quickly achieve the ability to crop images. Version: JQuery v1.5.1+jquery jcrop v0.9.12

• View Demo
• Download JQuery Jcrop v0.9.12
• Download website
• Submit a question/Bug/suggestion

Document Directory

1. How to use
2. Parameter description
3. API interface
4. Related information

Loading CSS files using methods

<link rel="stylesheet" href="jquery.Jcrop.css">

Loading JavaScript files

<script src="jquery.js"></script><script src="jquery.Jcrop.js"></script>

Add ID to IMG tag

<img id="element_id" src="pic.jpg">

Call Jcrop

$(‘#element_id‘).Jcrop();

Parameter description

name	Default Value	Description
Allowselect	True	Allow New Marquee
Allowmove	True	Allow marquee Movement
Allowresize	True	Allow marquee scaling
Trackdocument	True	When you drag a marquee, you allow the drag to continue beyond the image.
BaseClass	' Jcrop '	The base style name prefix. Note: The class="jcrop-holder" only change is the Jcrop. Example: If the value is "test", then the style name will change to "Test-holder"
AddClass	Null	Add a style. Example: If the value is "test", then the style is added to theclass="jcrop-holder test"
BgColor	' Black '	Background color. Color keywords, HEX, RGB are available.
Bgopacity	0.6	Background transparency
Bgfade	False	Using the background transition effect
Borderopacity	0.4	Marquee Border Transparency
Handleopacity	0.5	Zoom button Transparency
Handlesize	Null	Zoom button Size
Aspectratio	0	Marquee aspect ratio. Description: Width/height
Keysupport	True	Keyboard control is supported. Key list: Up or down (move marquee), ESC (uncheck Box)
Createhandles	[' n ', ' s ', ' e ', ' w ', ' nw ', ' ne ', ' se ', ' SW ']	Setting Up Corner Controllers
Createdragbars	[' n ', ' s ', ' e ', ' W ']	Set Border controller
Createborders	[' n ', ' s ', ' e ', ' W ']	Set border
Drawborders	True	Draw Border
Dragedges	True	Allow dragging borders
Fixedsupport	True	Supports fixed, for example: IE6, iOS4
Touchsupport	Null	Support for touch events
Shade	Null	Use a better matte
Boxwidth	0	Canvas width
Boxheight	0	Canvas height
Boundary	2	Boundary. Description: You can drag the mouse from the border to select the cropping area
Fadetime	400	Time to over effect
Animationdelay	20	Animation delay
Swingspeed	3	Transition speed
Minselect	[0, 0]	Select the minimum size of the selection box. Note: If the box is smaller than the size, the selection is automatically deselected
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
OnDblClick	function () {}	event when double-clicking inside the Marquee
Onrelease	function () {}	Event when a marquee is deselected

API interface

var jcropApi;$(‘#element_id‘).Jcrop({  allowSelect: true,  baseClass: ‘jcrop‘}, function() { jcropApi = this;});

name	Description
SetImage (String, callback)	Set (or change) the image. Example: Jcropapi.setimage (' newpic.jpg ')
SetOptions (object)	Set (or change) parameters in the same format as initialization setting parameters
Setselect (Array)	Create a marquee with the parameter format: [x, Y, x2, y2]
Animateto (Array, callback)	Create a marquee with an animated effect, with the parameter format: [x, Y, x2, y2]
Release ()	Cancel Marquee
Disable ()	Disables Jcrop. Description: A marquee has not been cleared.
Enable ()	Enable Jcrop
Destroy ()	Remove Jcrop
Tellselect ()	Gets the value of the marquee (actual size). Example: Console.log (Jcropapi.tellselect ())
Tellscaled ()	Gets the value of the marquee (interface size). Example: Console.log (jcropapi.tellscaled ())
GetBounds ()	Get the actual size of the picture in the format: [w, H]
Getwidgetsize ()	Get the picture display size in the format: [w, H]
Getscalefactor ()	Gets the scale of the picture scale, in the format: [w, H]

Related information

Author's website:

http://deepliquid.com/content/Jcrop.html

Related documents:

Github

Chinese documents

JQuery Jcrop Image Clipping source