File Api+jcrop Select, crop, and upload avatars

　　The file API, which directly reads local files, bypasses the process of background processing and returns to the foreground, making programming easier. Fileapi and Jcrop are used to upload avatars.

1. HTML part

　　<input id= "Demo" type= "File" onchange= "Showpic ();" />

　　

2. Fileapi preview Image (jquery)

　　<script type="text/javascript">

　　function Showpic () {

var file = $ (' #demo ') [0].files[0];

var reader = new FileReader ();

Reader.onload = function () {/////is triggered after successful loading. Reader.onloadend load success or failure will trigger

$ (' #avatar '). attr (' src ', reader.result);

}

Reader.readasdataurl (file);

}

</script>

3. Jcrop Capture Image Tool

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

　　<script src="./jquery-1.8.3.min.js"type="text/javascript"></script>

　　//1.8.2版本支持的很好，1.11有点问题，如果项目版本不支持，在下面再引用一遍1.8.2把之前版本覆盖就行，我试着是可以

　　<script type="text/javascript" src="./JCrop/js/jquery.JCrop.min.js"></script>

　　<script type="text/javascript">

　　function Showpic () {

var file = $ (' #demo ') [0].files[0];

var reader = new FileReader ();

Reader.onloadend = function () {

$ (' #avatar '). attr (' src ', reader.result);

}

Reader.readasdataurl (file);

var Jcropapi = $. Jcrop ($ ("#avatar"), {//This format to see

Aspectratio:1,//set to square

onchange:showcoords,//

　　　　　　Onselect:showcoords

});

}

function Showcoords (coords) {//This method is typically used to preview the cropping effect

Console.log (coords);//can print to see, store is information

}

</script>

So the main function of the front desk has.

4, the image and interception of data transmitted back to the table processing

The above coords object, which records information about the captured image (X,y,x2,y2,w,h), the coordinates of the above two points and the width and height of the interception

The Jcrop getscalefactor () method can get the picture scale [w,h].

When and how to complete the value of the time to see a person's preferences.

5. Attached API

Parameters:

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 a style. Example: If the value is "test", then the style is added to the
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

Method:

　　

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, the parameter format is: [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 (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]. There are some versions of jquery online. JCrop.min.js file does not contain this method, re-download a complete version

File Api+jcrop Select, crop, and upload avatars