Friends who have used Sina Weibo have an impression on their profile picture editor. however, 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:
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.
- 2 pages in total:
- Previous Page
- 1
- 2
- Next Page