Jquery. Jcrop-based Avatar Editor

Friends who have used Sina Weibo have an impression on their profile picture editor, but they use flash.
In a project, the same thing was used. I wanted to use Sina Weibo directly, but some of its request paths were written into FLASH, so I had to give up.
Found jquery on the Internet. jcrop basically satisfies my needs, but it is just a simple cut, and the thumbnail is not generated. maybe many people need such things, so I encapsulated it for other friends to use it directly.
Http://deepliquid.com/content/Jcrop.html
There are a lot of demos on it. If you are interested, you can go and have a look.
In this article, the encapsulated JS is as follows:
Copy codeThe Code is as follows:
JQuery. UtrialAvatarCutter = function (config ){
Var h, w, x, y;
Var OS, oh, ow;
Var api = null;
Var sel = this;
Var img_content_id = config. content;
Var img_id = "img _" + (Math. random () + ""). substr (3,8 );
Var purviews = new Array ();
Var select_width = null;
Var select_height = null;
If (config. purviews ){
For (I = 0, c = config. purviews. length; I <c; ++ I ){
Purviews [purviews. length] = config. purviews [I];
}
}
Check_thums_img = function (){
If (config. purviews ){
For (I = 0, c = config. purviews. length; I <c; ++ I ){
If ($ ('#' + config. purviews [I]. id + "img"). length = 0 ){
('{'{Config.purviews{ I }.id}.html (" ");
} Else {
$ ('#' + Config. purviews [I]. id + "img"). attr ("src", OS );
}
}
}
}
/*
* Reload the image
*/
This. reload = function (img_url ){
If (img_url! = Null & img_url! = ""){
OS = img_url + "? "+ Math. random ();
$ ("#" Export img_content_id).html (" ");
$ ("#" + Img_id). bind ("load ",
Function (){
Check_thums_img ();
Sel. init ();
}
);
}
}
$ ("#" + Img_content_id + "img"). attr ("id", img_id );
Var preview = function (c ){
If (c. w = 0 | c. h = 0 ){
Api. setSelect ([x, y, x + w, y + h]);
Api. animateTo ([x, y, x + w, y + h]);
Return;
}
X = c. x;
Y = c. y;
W = c. w;
H = c. h;
For (I = 0, c = purviews. length; I <c; ++ I ){
Var purview = purviews [I];
Var rx = purview. width/w;
Var ry = purview. height/h;
$ ('#' + Purview. id + "img" ).css ({
Width: Math. round (rx * ow) + 'px ',
Height: Math. round (ry * oh) + 'px ',
MarginLeft: '-' + Math. round (rx * x) + 'px ',
MarginTop: '-' + Math. round (ry * y) + 'px'
});
}
}
This. init = function (){
If (api! = Null ){
Api. destroy ();
}
OS = $ ("#" + img_content_id + "img"). attr ("src ");
If (OS = "")
Return;
Check_thums_img ();
For (I = 0, c = purviews. length; I <c; ++ I ){
Var purview = purviews [I];
Var purview_content = $ ("#" + purview. id );
Purview_content.css ({position: "relative", overflow: "hidden", height: purview. height + "px", width: purview. width + "px "});
}
Oh = $ ('#' + img_id). height ();
Ow = $ ('#' + img_id). width ();
Select_width = config. selector. width;
Select_height = config. selector. height;
Select_width = Math. min (ow, select_width );
Select_height = Math. min (oh, select_height );
X = (ow-select_width)/2 );
Y = (oh-select_height)/2 );
// This is the original Jcrop configuration. You can modify other Jcrop functions here.
Api = $. Jcrop ('#' + img_id ,{
AspectRatio: 1,
OnChange: preview,
OnSelect: preview
});
// Set the default position of the Selection box
Api. animateTo ([x, y, x + select_width, y + select_height]);
}
This. submit = function (){
Return {w: w, h: h, x: x, y: y, s: OS };
}
}

Relatively simple.
The application is also very simple.
1. Import required files
Code
Copy codeThe Code is as follows:
<LINK href = "css/jquery.Jcrop.css" type = "text/css" rel = "Stylesheet" media = "screen">
<Script type = "text/javascript" src = "js/jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. Jcrop. min. js"> </script>
<Script type = "text/javascript" src = "js/jQuery. UtrialAvatarCutter. js"> </script>

2. Define the container for the original image and thumbnail
Code
Copy codeThe Code is as follows:
<! --
Original graph
-->
<Div id = "picture_original">

</Div>
<! ---
Thumbnail
-->
<Div id = "picture_200"> </div>
<Div id = "picture_50"> </div>
<Div id = "picture_30"> </div>

3. Configuration
Code
Copy codeThe Code is as follows:
Var cutter = new jQuery. UtrialAvatarCutter (
{
// Container ID of the main Image
Content: "picture_original ",
// Thumbnail configuration, ID: container ID; width, height: thumbnail size
Purviews: [{id: "picture_200", width: 200, height: 200}, {id: "picture_50", width: 50, height: 50}, {id: "picture_30", width: 30, height: 30}],
// Default selector size
Selector: {width: 200, height: 200}
}
);

4. Trigger
Copy codeThe Code is as follows:
$ (Window). load (function (){
Cutter. init ();
});

5. If you use ajax to upload images, you can use cutter. reload (imgs_url) to instantly modify the image path.
File packaging download http://www.jb51.net/jiaoben/24767.html