Jqueryimgareaselect uses js and program to achieve image cutting _ jquery

Currently, in ff3, jquery's width () and height () functions are used. If the width and height of an image are not set, initialization in the image load function is not required. The Code is as follows:

/*
Defect. Currently, in ff3, jquery's width () and height () functions are used. When the image width and height are not set
The image must be initialized in the image load function.
*/
Sanshi_imgareaselect = function (pic_id, view_p_id ){
This. pic_obj = jQuery ("#" + pic_id );
This. pic_width;
This. pic_height;
This. view_p_id = view_p_id;
This. view_width = 100;
This. view_height = 100;
This. view_img_id = view_p_id + "_ sanshi_img ";
This. ias;
}
// Create a 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;
}
// Initialize the 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 an image
JQuery ("#" + this. view_p_id). append (this. make_view_pic ());
// Set the preview loading layer style
JQuery ("#" Export this.view_p_id).css ({'width': this. view_width, 'height': this. view_height, 'overflow': 'hidd '});
// Construct the function of the selected region
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 + "'mirror.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 the imgAreaSelect Function
Var ias = this. pic_obj.imgAreaSelect ({
// Set the ratio column of the Selection box
// AspectRatio: "1:1 ",
// Add effect in the setting box
FadeSpeed: 200,
// Select whether to cancel the selection.
AutoHide: false,
// Whether the Image Mask Layer is displayed
Show: true,
// Whether APIs are used
Instance: true,
// Set the initial function to draw a selection box
OnInit: function (img, selection) {ias. setSelection (100, 50,250,150, true); ias. update ();},
// Set the selected function and use dynamic execution.
OnSelectEnd: function (img, selection) {eval (fun_str );}
});
// Assign a value to the global
This. ias = ias;
}
// The save event is submitted in get mode.
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 a parameter exists
Post_page + = post_page.lastIndexOf ("? ") <0? "? ":"&";
// Assemble the get url
Post_url = post_page + post_arr.join ("&");
Alert (post_url );
}

This is the encapsulated js Code.
Next let's take a look at how to use this code.

The Code is as follows:

$ (Document). ready (function (){

// Declare a function
Var sanshi_img = new sanshi_imgareaselect ("mypic", "preview ");
// Ensure that the initialization function is executed after the image is loaded, so as to avoid the bug mentioned above; otherwise, the 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", 'phpight ': "height "});
});
})

Let's take a look at the html code.

The Code is as follows: