JQuery Image Clipping Plugin Jcrop

Jcrop Introduction

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.

Jcrop is a free software that is released using the MIT License .

Note: This article mainly revolves around Jcrop V2.0.0-rc1 version, some parameters or APIs are Jcrop v0.9.12 and may not be supported in previous versions.

Version

Jcrop v0.9.12 supports drawing a frame to intercept a picture.

Jcrop V2.0.0-rc1 In contrast to the old version, added support for drawing multi-frame features.

：

Http://jcrop.org/download

Download the corresponding version of the compressed package.

There is a demo directory in the package, there are many examples of application scenarios, you can refer to.

How to use

Loading CSS Files

<Linkrel= "stylesheet"href= "Jcrop.css">

Loading JavaScript files

<Scriptsrc= "Jquery.js"></Script>
<Scriptsrc= "Jcrop.js"></Script>

Add ID to img tag

<imgID= "element_id"src= "Pic.jpg">

Call Jcrop

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

Parameter description

The following table is the main parameter of the Jcrop object:

Property category	Name	Default value	Description
check box Properties	Edge	{n:0, s:0, e:0, w:0}	Set the thickness of the four boundary lines of the box Cases: Cb.setoptions ({edge: {n:15, E: -20, S: -40, w:28}});
	Setselect	Null	Set a box, the parameters should be the upper-left corner of the box x-coordinate, the upper-left corner of the y-coordinate, width, height Cases: Cb.setselect ([147, 55, 456, 390]);
	Linked	TRUE	Whether to connect
	Linkedcurrent	TRUE	Whether to connect the current check box
	CanDelete	TRUE	Allow Delete box
	Canselect	TRUE	Allow check box
	Candrag	TRUE	Allow drag-and-drop boxes
	Canresize	TRUE	Allow Zoom Out box
Sub-component	Eventmanagercomponent	Jcrop.component.EventManager	Event Management Components
	Keyboardcomponent	Jcrop.component.Keyboard	Keyboard Event Response Component
	Dragstatecomponent	Jcrop.component.DragState	Drag-and-drop status components
	Stagemanagercomponent	Jcrop.component.StageManager	Stage Management components
	Animatorcomponent	Jcrop.component.Animator	Animation processing Components
	Selectioncomponent	Jcrop.component.Selection	check box Management component
	Stageconstructor	Jcrop.stageconstructor	Stage Object Builder
Stage Property	Allowselect	TRUE	Allow new boxes to be selected
	Multi	FALSE	Allow multiple boxes to be drawn
	Multimax	FALSE	Maximum number of frames
	Multicleanup	TRUE	Allow all boxes to be cleared
	Animation	TRUE	Allow animation effects
	Animeasing	Swing	Animation effect Type
	Animduration	400	Animation duration
	Fading	TRUE	Allow fade in and fade out effects
	Fadeduration	300	Fade duration
	Fadeeasing	Swing	Fade type
	BgColor	Black	Background color
	Bgopacity	0.5	Background transparency
Startup options	Applyfilters	[' constrain ', ' extent ', ' backoff ', ' ratio ', ' shader ', ' round ']	Apply Filters
	Borders	[' E ', ' W ', ' s ', ' n ']	Border
	Handles	[' n ', ' s ', ' e ', ' w ', ' SW ', ' ne ', ' nw ', ' SE ']	Handle
	Dragbars	[' n ', ' e ', ' W ', ' s ']	Drag Bar
	Drageventtarget	Window	Drag and Drop event targets
	XScale	1	X-Directional Scale
	Yscale	1	Y-direction ratio
	Boxwidth	Null	Box width
	Boxheight	Null	Box height

Api

The following table is the primary API for the Jcrop object:

Name	Description
Init	Initializing the Jcrop object
Destroy	Destroying Jcrop objects
Applysizeconstraints	Apply size limit conditions
InitComponent	Initializes the specified subassembly
SetOptions	Setting option Parameters Cases: Cb.setoptions ({allowselect:true, multi:false});
Applyfilters	Apply Filters
Getdefaultfilters	Get the default filter
SetSelection	Set check box
GetSelection	Get check box
Newselection	Create a new check box
Hasselection	Determine if there is a check box
RemoveSelection	Remove check box
AddFilter	Add Filter
Removefilter	Remove Filter
Blur	Do not focus check box
Focus	Focus check box
Initevents	Initializing events
Maxselect	Set the maximum width and height of a check box
Refresh	Refresh All Boxes
Blurall	All boxes are un-focused.
Scale	box is scaled by scale
Unscale	Reverse operation of Scale
Deleteselection	Delete the check box and focus on the first created box
Animateto	Create a new box in an animated form
Setselect	Settings box
Getcontainersize	Get the dimensions of a container
Resizecontainer	Adjust the width and height of the container
SetImage	Set the Jcrop bound image, you can use this function to change the picture
Update	Update box

JQuery Image Clipping Plugin Jcrop