jquery imgareaselect uses js and program to realize image cutting_jquery

Copy code The code is as follows:

/*
Defect, currently under ff3, using jquery’s width() and height() functions, when the width and height of the image are not set, the
required in the image cannot be obtained It can only be initialized in the load function
*/
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_width = 100;
this.view_height = 100;
this.view_img_id = view_div_id "_sanshi_img";
}
//Create preview image
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;
}
//Initialization function
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);
/ /Add picture
jQuery("#" this.view_div_id).append(this.make_view_pic());
//Set preview loading layer style
jQuery("#" this.view_div_id).css( {'width':this.view_width,'height':this.view_height,'overflow':'hidden'});
//Construct the function to complete the selection area
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({width: Math .round(scaleX * " this.pic_width "),height: Math.round(scaleY * " this.pic_height "),marginLeft: -Math.round(scaleX * selection.x1),marginTop: -Math.round(scaleY * selection.y1)});}";
//alert(fun_str);
//Initialize imgAreaSelect function
var ias = this.pic_obj.imgAreaSelect({
//Set the selection box Ratio
            //aspectRatio: "1:1",
                                                                                                                                does the adding effect , // Whether the picture mask layer is displayed
Show: true,
// Whether the API
Instance: TRUE,
// Set the initial function to draw the selection box
oninit :function(img, selection){ias.setSelection(100, 50, 250, 150, true);ias.update();},
                                                                                                                                                                                                . :function(img, selection){eval(fun_str);}
          }); It is submitted by get method
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] ? opt[n] : n;
post_arr.push(temp_str);
});
//Determine whether there are parameters
post_page = post_page.lastIndexOf("?")<0 ? "?" : "&";
//Assemble the get method url
post_url = post_page post_arr.join("&");
alert(post_url);
}


This is the encapsulated js code
Let’s see how to use this code

Copy the code The code is as follows:

$(document).ready(function () {

//Declare function
var sanshi_img = new sanshi_imgareaselect("mypic","preview");
//Ensure that the image loading is completed and the initialization function is executed to avoid the bug mentioned above, otherwise compatibility cannot be guaranteed
$("#mypic").load(function(){sanshi_img.init();});
//Listen to save events
$("#save_pic").click(function(){
sanshi_img.save_pic('1.php?n=6',{"id":5," px1":"x1","py1":"y1",'px2':"x2","py2":"y2",'pwidth':"width",'pheight':"height"});
    }); The code is as follows:

The html header in this cannot be lost. If lost, there will be problems under IE7. It will not affect the use, but it will affect the aesthetics
Plug-in package download address
http://www.jb51.net/jiaoben/31986.html