A friend who has used Sina Weibo has an impression of its avatar editor. But others are made of flash.
In a project, also used the same thing, originally wanted to use Sina Weibo, but it has a part of the request path written to flash inside, so had to give up.
Found jquery on the Internet. Jcrop, basically meet my needs, but it is just a simple cut, there are no thumbnails generated. Maybe a lot of people need this kind of thing, so I encapsulated it, so that other friends to use directly.
Official website: http://deepliquid.com/content/Jcrop.html
There are a lot of demo, interested can go up to see.
In this article, the encapsulated JS is as follows:
Copy Code code 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 Picture
*/
This.reload = function (Img_url) {
if (img_url!=null && img_url!= "") {
OS = img_url+ "?" +math.random ();
$ ("#" +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, modified here to modify the various other functions of jcrop
API = $. Jcrop (' # ' +img_id,{
Aspectratio:1,
Onchange:preview,
Onselect:preview
});
Set the default location for 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};
}
}
More simple, no more talking
The application section is also very simple
1. Import the required files
Code
Copy Code code 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. A container that defines the original picture and the thumbnail
Code
Copy Code code as follows:
<!--
Original map
-->
<div id= "Picture_original" >
</div>
<!---
Thumbnail image
-->
<div id= "picture_200" ></div>
<div id= "Picture_50" ></div>
<div id= "Picture_30" ></div>
3. Configure
Code
Copy Code code as follows:
var cutter = new Jquery.utrialavatarcutter (
{
The container ID of the main picture
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}],
Selector default Size
Selector: {width:200,height:200}
}
);
4. Trigger
Copy Code code as follows:
$ (window). Load (function () {
Cutter.init ();
});
5. If you are uploading pictures using AJAX, you can use Cutter.reload (Imgs_url) to instantly modify the image path
File package Download http://www.jb51.net/jiaoben/24767.html
