jquery.Jcrop_jquery 기반 아바타 편집기

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;iif($('#' config.purviews[i].id " img").length==0 ) {
$('#' config.purviews[i].id).html("")
}else{
$( ' #' config.purviews[i].id " img").attr("src",os)
}
}
}
}
/*
* 이미지 다시 로드
*/
this.reload = function(img_url){
if(img_url!=null && img_url != ""){
os = img_url "?" ) ;
$("#" img_content_id).html("")
$("#" img_id) 바인딩("로드",
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; 🎜 >y = c.y;
w = c.w;
h = c.h;
for(i=0,c=purviews.length;ivar 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); select_width ) / 2);
y = ((oh - select_height) / 2);
//Jcrop의 다양한 다른 기능을 수정하려면 여기를 수정하세요.
api = $.Jcrop ('#' img_id,{
aspectRatio: 1,
onChange: 미리보기,
onSelect: 미리보기
})//선택 상자의 기본 위치 설정
api .animateTo( [ x, y, x select_width, y select_height ]);
}
this.submit = function(){
return {w:w,h:h,x:x,y: y,s :os};
}
}


상대적으로 간단하고 자세한 내용은 없습니다.
응용 프로그램 부분도 매우 간단합니다
1.
코드

코드




코드 복사

< ;div id="picture_200">