SoFunction
Updated on 2025-03-10

jquery imgareaselect uses js and programs to achieve image cutting


/*
Flaw, currently under ff3, use the width() and height() functions of jquery. If the width and height of the picture are not set, it cannot be retrieved.
It needs to be initialized in the image 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 a preview picture
sanshi_imgareaselect.prototype.make_view_pic =function(){
    var img_obj = jQuery(("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;
}
//Initialize the function
sanshi_imgareaselect.=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 pictures
    jQuery("#"+this.view_div_id).append(this.make_view_pic());
//Set the preview loading layer style
    jQuery("#"+this.view_div_id).css({'width':this.view_width,'height':this.view_height,'overflow':'hidden'});
//Construct the function completed by selecting the region
    var fun_str="if ( && ){ var scaleX = "+this.view_width+" / ;var scaleY = "+this.view_height+" / ;jQuery('#"+this.view_img_id+"').css({width: (scaleX * "+this.pic_width+"),height: (scaleY * "+this.pic_height+"),marginLeft: -(scaleX * selection.x1),marginTop: -(scaleY * selection.y1)});}";
    //alert(fun_str);
//Initialize the imgAreaSelect function
    var ias = this.pic_obj.imgAreaSelect({
//Set the ratio of the selection box
        //aspectRatio:"1:1",
//The effect of setting box
        fadeSpeed:200,
//Whether to cancel the selection box by yourself after it is finished
        autoHide:false,
//Whether to display the picture mask layer
        show:true,
//Whether to use API
        instance: true,
//Set the initial function and draw the selection box
        onInit:function(img, selection){(100, 50, 250, 150, true);();},
//Set the selected function and use dynamic execution
        onSelectEnd:function(img, selection){eval(fun_str);}
        });
// Assign value to the global
     = ias;
}
//Save events. Submit by get
sanshi_imgareaselect.prototype.save_pic=function(post_page,post_param){
    var opt = (true);
    var post_arr = new Array();
    (post_param,function(i,n){
        var temp_str =i+"=";
        temp_str += opt[n] ? opt[n] : n;
        post_arr.push(temp_str);
    });
//Judge whether there are parameters
    post_page += post_page.lastIndexOf("?")<0 ? "?" : "&";
//The url assembled get
    post_url = post_page+post_arr.join("&");
    alert(post_url);
}