jquery imgareaselect는 js와 프로그램을 사용하여 이미지 절단을 실현합니다.

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

/*
결함, 현재 ff3에서 jquery의 width() 및 height() 함수를 사용하면 이미지의 너비와 높이가 설정되지 않은 경우 이미지에 필요한
을 사용할 수 없습니다. 로드 함수에서만 초기화할 수 있습니다
*/
sanshi_imgareaselect = function(pic_id,view_div_id){
this.pic_obj = jQuery("#" pic_id)
this.pic_width; 🎜> this.pic_height;
this.view_div_id = view_div_id;
this.view_height = 100;
this.view_img_id "_sanshi_img"; .ias; 🎜 >}
//미리보기 이미지 생성
sanshi_imgareaselect.prototype.make_view_pic =function(){
var img_obj = jQuery(document.createElement("IMG"))
img_obj. attr("src",this.pic_obj.attr("src"));
img_obj.attr("id",this.view_img_id)
img_obj.attr("width",this.view_width);
img_obj .attr("height",this.view_height);
return img_obj;
}
//초기화 함수
sanshi_imgareaselect.prototype.init=function(){
this .pic_width = this .pic_obj.attr("width");
this.pic_height = this.pic_obj.attr("height");
//alert(this.pic_width ":" this.pic_height);
/ /그림 추가
jQuery("#" this.view_div_id).append(this.make_view_pic())
//미리보기 로딩 레이어 스타일 설정
jQuery("#" this.view_div_id ).css( {'width':this.view_width,'height':this.view_height,'overflow':'hidden'})
//선택 영역을 완성하는 함수 구성
var fun_str= "if ( Selection.width && Selection.height){ var scaleX = " this.view_width " / Selection.width;var scaleY = " this.view_height " / Selection.height;jQuery('#" this.view_img_id "'). css({너비: 수학 .round(scaleX * " this.pic_width "), 높이: Math.round(scaleY * " this.pic_height "),marginLeft: -Math.round(scaleX * Selection.x1),marginTop: - Math.round(scaleY * Selection.y1)});}";
//alert(fun_str);
//imgAreaSelect 함수 초기화
var ias = this.pic_obj.imgAreaSelect({
//선택 상자 비율 설정
            //aspectRatio: "1:1",
                                                                                                                 추가 효과를 줍니다. // 그림 마스크 레이어 표시 여부
표시: true,
// API 여부
인스턴스: TRUE,
// 선택 상자를 그리는 초기 함수 설정
oninit :function(img, Selection){ias.setSelection(100, 50, 250, 150, true);ias.update();},
                                                                                        > }); get 메소드
sanshi_imgareaselect.prototype.save_pic=를 통해 제출됩니다. function(post_page,post_param){
var opt = this.ias.getSelection(true);
var post_arr = new Array()
jQuery .each(post_param,function(i,n){
var temp_str =i "=";
temp_str = opt[n] : n
post_arr.push(temp_str)
}); 매개변수가 있습니다
post_page = post_page.lastIndexOf("?")<0 ? "?" : "&"
//get 메소드 URL을 조립합니다.
post_url = post_page post_arr.join("& ");
경고(post_url);
}


캡슐화된 js 코드입니다
이 코드를 어떻게 사용하는지 살펴보겠습니다

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

$(document).ready(function () {

//함수 선언
var sanshi_img = new sanshi_imgareaselect("mypic","preview");
//위에서 언급한 버그를 피하기 위해 이미지 로딩이 완료되고 초기화 함수가 실행되는지 확인하세요. 그렇지 않으면 호환성을 보장할 수 없습니다.
$("#mypic").load(function(){sanshi_img.init ();});
//이벤트 저장 듣기
$("#save_pic").click(function(){
sanshi_img.save_pic('1.php?n=6',{ "id":5," px1":"x1","py1":"y1",'px2':"x2","py2":"y2",'pwidth':"너비",'pheight': "height"});
    }); 코드는 다음과 같습니다:

;script type="text/javascript" src="scripts/jquery .imgareaselect.pack.js" src="scripts/jquery.imgareaselect.pack.js">

>
여기에 포함된 html 헤더는 손실될 수 없습니다. IE7에서는 문제가 발생할 수 있지만 사용에는 영향을 미치지 않지만
플러그인 패키지 다운로드 주소
http: //www.jb51.net/jiaoben/31986.html