JQuery jcrop Image cropping tool learning

Source: Internet
Author: User

Options parameter Description:

Name Default value Description
Allowselect
True
Allow New Marquee
Allowmove
True
Allow marquee Movement
Allowresize
True
Allow marquee scaling
Trackdocument
True

BaseClass
"Jcrop"
The base style name prefix. Description:class= "Jcrop-holder", only to change the jcrop.
addclass
null
add style. Example: Suppose that the value is class=" Test Jcrop-holder "
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
9
Zoom button Size
Handleoffset
5
The distance between the Zoom button and the border
Aspectratio
0
Marquee aspect ratio. Description:width/height
Keysupport
True
keyboard control is supported. Key list: Up or Down (move),Esc(cancel),Tab(jump out of crop box, to next)
Cornerhandles
True
Allow Corner scaling
Sidehandles
True
Allow four-sided 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 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
Onrelease
function () {}
Event when a marquee is deselected

API Interface:

Name Description
SetImage (String) Set (or change) the image. Example: Jcrop_api.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) Create a marquee with the animation effect, with the parameter format: [X,y,x2,y2]
Release () Cancel Marquee
Disable () Disabled Jcrop . Description: A marquee has not been cleared.
Enable () enabled Jcrop
Destroy () removed from Jcrop
Tellselect () gets the value of the marquee (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 the picture display size in the format: [W,h]
Getscalefactor () gets the scale of the picture scale, in the format: [W,h]
Official website: http://deepliquid.com/content/Jcrop.html

"0-minute download resources "

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.