Avatar editor based on jquery.Jcrop_jquery

Friends who have used Sina Weibo may have an impression of its avatar editor. However, it is made with flash.
In a project, the same thing was used. I originally wanted to use Sina Weibo directly. But part of the request path was written into FLASH, so I had to give up.
I found jquery.Jcrop on the Internet, which basically met my needs, but it was just a simple cutting, and thumbnails were not generated. Maybe many people need this kind of thing, so I encapsulated it so that other friends can use it directly.
Official website: http://deepliquid.com/content/Jcrop.html
There are many above If you are interested, you can check out the demo.
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;ipurviews[purviews.length] = config.purviews[i];
}
}
check_thums_img = function(){
if(config.purviews){
for(i=0,c=config.purviews.length;iif($('#' config.purviews[i].id " img").length==0) {
$('#' config.purviews[i].id).html("");
}else{
$(' #' config.purviews[i].id " img").attr("src",os);
}
}
}
}
/*
* Re Load image
*/
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;ivar 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;ivar 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. Modify here to modify various other functions of Jcrop
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};
}
}

3. Configuration
Code

Copy code The code is as follows:

var cutter = new jQuery.UtrialAvatarCutter(
{
//Container ID where the main picture is located
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 size of the selector
selector : {width:200,height:200}
}
);

4. Trigger

Copy code The 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 modify them instantly Image path
File package downloadhttp://www.jb51.net/jiaoben/24767.html