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:

Copy the code The 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;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};
}
}

It’s relatively simple, no more details
The application part is also very simple
1. Import the necessary files
Code

Copy code The code is as follows:

2. Define containers for original images and thumbnails
Code

Copy code The code is as follows:

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn