jquery.Jcrop_jquery 기반 아바타 편집기

Sina Weibo를 사용해 본 친구들은 아바타 편집기에 대한 인상을 가질 수 있습니다.
프로젝트에서 원래 Sina Weibo를 직접 사용하고 싶었지만 일부입니다. 경로가 FLASH에 작성되어 있어서 포기할 수 밖에 없었습니다.
인터넷에서 jquery.Jcrop을 찾았는데 기본적으로 제 요구 사항은 충족했지만 단순한 잘라내기일 뿐이고 썸네일은 생성되지 않았습니다. 아마도 많은 사람들이 이것을 필요로 할 것입니다. 그런 내용이라 다른 친구들이 직접 사용할 수 있도록 캡슐화해두었습니다.
공식홈페이지: http://deepliquid.com/content/Jcrop.html
위 내용이 많이 있으니 관심 있으신 분들은 참고해주세요.
이 기사에서 캡슐화된 JS는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음 :

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.
코드

코드 복사


코드는 다음과 같습니다.

< ;script type="text/javascript " src="js/jQuery.UtrialAvatarCutter.js">

2. 원본 이미지 및 썸네일용 컨테이너 정의

코드




코드 복사

코드는 다음과 같습니다.

< ;div id="picture_200">

3. 구성
코드

코드 복사 코드는 다음과 같습니다.

var Cutter = new jQuery.UtrialAvatarCutter(
{
//메인 사진이 위치한 컨테이너 ID
content: "picture_original",
//썸네일 구성, ID : 컨테이너 ID ;너비, 높이: 썸네일 크기
범위: [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id :" picture_30",width:30,height:30}],
//선택기의 기본 크기
선택기: {width:200,height:200}
}
); >

4. 트리거

코드 복사 코드는 다음과 같습니다.

$(window).load(function(){
cutter.init();
})

5. Ajax를 사용하여 이미지를 업로드할 수 있습니다. .reload(imgs_url) 즉시 수정 이미지 경로
파일 패키지 다운로드
http://www.jb51.net/jiaoben/24767.html