About the jquery plugin imgareaselect basic explanation

About Imgareaselect, is a jquery plug-in, it supports the user by dragging the mouse to select a part of the picture, drag, picture editing, etc. ~ ~ to specific look

1. Download the Imgareaselect plugin first

：

English: http://odyniec.net/projects/imgareaselect/

English: http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

In the header reference:

2, the download plugin has three style sheets

imgareaselect-default.css– This is the default style sheet,
imgareaselect-animated.css– This style is basically the same as the default style sheet, except that it allows you to change the selection area border
imgareaselect-deprecated.css– Use this style sheet only if you want to use an option that you do not agree with.
You just need to add one of the stylesheets to the HTML header. This CSS folder also contains 4 GIF images, which are used to display the border.

3. Element distribution

This plug-in creates several div elements to represent the selection area, including borders, adjustable handles, and areas that are not selected. These elements already specify a specific class name, so you can use CSS or jquery selectors to get and manipulate them.

The prefix "Imgareaselect" is the default prefix and can be modified by the "classprefix" option. This is especially useful when there are many selection boxes that need to be manipulated separately (such as modifying styles).

4. Options
The user can be customized in many aspects of the plugin, and the user is able to do this with the plugin option (these options will be effective when the plugin is initialized). These options include:

Options	Describe
Aspectratio	Aspect ratio , which will remain unchanged at the time of selection. e.g. "4:3"
AutoHide	If set to true, the area disappears after the selection is complete. Default:false
Classprefix	Prefix the plugin elements in advance (see below: 5, elements and classes) Default:imgareaselect
Disable	If set to True, this plugin will not work (but the image is still visible)
Enable	If set to True, the plugin will work again
Fadespeed	If set to a number greater than 0, the "Fade/Fade" plugin Default:true
Handles	If set to True, display the change box when resizing (that is, there are small "rectangles" in the corners). Default:false
Hide	If set to True, hides the selection box
ImageHeight	The true height of the image (because it may be blocked by CSS)
ImageWidth	The true width of the image (because it might have been a CSS bloom)
Instance	The set as True,imgareaselect () function returns a reference to the selected area image so that the API can be used further. (see 8, API method)
Keys	Enable/disable keyboard support (see 7, keyboard support) Default:false
MaxHeight	Limits the selection box (in pixels) to set the maximum, minimum height, width.
MaxWidth
MinHeight
MinWidth
Movable	Set whether selection box movement is supported Default:true
Parent	Specifies the parent element to which this plug-in is attached by default Default:body
Persistent	If set to true, clicking outside the Select area will start a new option (in other words, whether the user can only move/zoom the selection area) Default:false
Remove	If set to true, the plug-in will be completely removed
Resizable	Determines whether the selection area can change size Default:true
Resizemargin	"Resizable" mode is enabled when you select a region with a width that is greater than the number of pixels
Show	If set to True, the selection area will be visible
X1 Y1	The coordinates of the upper-left corner of the selection box at initialization
X2 Y2	The coordinates of the lower-right corner of the selection box at initialization
ZIndex	Sets the value of the z-index of the element to which this plug-in is acting, and in general, Imgareaselect can always automatically calculate its value, but in rare cases it is necessary to set it.
OnInit	Functions called when the plug-in is initialized (see 6, callback function)
Onselectstart	function called when starting the selection (see 6, callback function)
Onselectchange	function called when changing the selection area (see 6, callback function)
Onselectend	function that is called when the selection ends (see 6, callback function)

5. Callback function

The callback function (when setting oninit, onselectstart, Onselectchange or Onselectend options) receives two parameters, the first option is a reference to the image applied by the plugin, and the other is the object that renders the current selection, which has six properties.

For the sake of understanding, here is an example of the callback function executed when the selection is complete:

$ (' Img#photo '). Imgareaselect ({

Onselectend:function (IMG, selection) {

Alert (' width: ' + selection.width + '; height: ' + selection.height ');

}

});

6. Keyboard support

If the option "Keys" is set to true, then we can use the keys on the keyboard to come in to select the movement of the box. The following keys can be used, the default features are as follows:

Each property is set by a numeric value (in pixels, a value of either less than 1), indicating how many pixels are moved/resized when this key is pressed, or specifying its value as "string" to specify that it is "resize" mode. For example:

$ (' img#example '). Imgareaselect ({

Keys: {arrows:15, Ctrl:5, Shift: ' Resize '}

});

In this example, the arrow keys move the selection by 15 pixels, the CTRL key will move 5 pixels, and the SHIFT key will switch to resize mode.

If you have more than one image and you have modified the key settings yourself, you will only apply this custom setting to one image. In general, when an image is "activated" (with a mouse click), the image uses a custom key setting.

7. API method

The plugin also provides several API methods to extend its application and be able to federate with other Web applications through these API methods.

In order to use these methods, you first need a plug-in object, you can call the Imgareaselect () function and have its option "instance" set to true to achieve:

var IAS = $ (' #photo '). Imgareaselect ({instance:true});

You can now use this object to invoke a public method. For example, set a default pre-defined range:

Ias.setselection (n, Max, Max, Max, true);

Ias.setoptions ({show:true});

Ias.update ();

These API methods can be used as long as the initialization is complete. These API methods are listed below:

Second, simple example 1, width or height limit

The MinWidth, MinHeight, MaxWidth, and maxheight options allow you to set the range of the selection. In this example, the maximum range of images will be limited to 200x150px.

$ (document). Ready (function () {

$ (' #ladybug_ant '). Imgareaselect ({maxwidth:200, maxheight:150, handles:true});

});

2, fixed aspect ratio

Configure the Aspectratio option so that it is set to "4:3":

$ (document). Ready (function () {

$ (' #bee '). Imgareaselect ({aspectratio: ' 4:3 ', handles:true});

});

3. Set the initial option area

Configuring the X1, y1, x2 and Y2 options is possible:

$ (document). Ready (function () {

$ (' #duck '). Imgareaselect ({x1:120, y1:90, x2:280, y2:210});

});

Iii. callback Function Example 1, selection preview

In the following code snippet, the Onselectchange () callback function implements the effect of selecting a region preview.

Official Source code: http://odyniec.net/projects/imgareaselect/examples-callback.html

Function Preview (IMG, selection) {

var ScaleX = +/(Selection.width | | 1);

var ScaleY = +/(Selection.height | | 1);

$ (' #ferret + div > img '). CSS ({

Width:Math.round (ScaleX * +) + ' px ',

Height:Math.round (ScaleY *) + ' px ',

MarginLeft: '-' + math.round (ScaleX * selection.x1) + ' px ',

MarginTop: '-' + math.round (ScaleY * selection.y1) + ' px '

});

}

This is where the same image is inserted after the original image by jquery syntax.

$ (document). Ready (function () {

$ (' <div><div> ")

. css ({

float: ' Left ',

Position: ' Relative ',

Overflow: ' Hidden ',

Width: ' 100px ',

Height: ' 100px '

})

. InsertAfter ($ (' #ferret '));

$ (' #ferret '). Imgareaselect ({aspectratio: ' 1:1 ', onselectchange:preview});

});

Since the preview window is 100x100px, the preview will zoom in when the window is less than 100px, and the preview will zoom out when the window is larger than 100px. These two types are as follows:

1 when the window is greater than 100px

2 when the window is less than 100px

It is necessary to note that this effect is made using a technique. The most critical one is equal ratio scaling. It needs two pictures, the first picture is the original, the second graph is the selection of the area after the graph, with the selection of the first figure of the coordinate +css control to produce the second graph, in fact, two graphs are the same, but through the CSS control the display area of the second graph and zoom ratio. The evidence is as follows:

"Evidence one" in the $ (document). The Ready () function inserts "src" as a picture of "ferret.jpg" through InsertAfter. Notice again, this section of "Overflow: ' Hidden '," This line of code is to let more than 100px high-width picture of the extra content hidden.

"Evidence two" in the Preview () function, first defines the ScaleX and ScaleY, their content is 100/selection.width (or height), That is, when the selection.width is less than 100, this factor acts as a magnifying effect, and vice versa.

It is worth noting that:

The actual figure in the callback function of the width of the height (300,400 here is the actual figure of the high, to adjust according to the actual situation!) ), the width height of the new figure in the callback function must be set correctly, otherwise the selection deviation will occur

2, submit the coordinates of the selection

If you need to implement true functionality, you must use server-side support, such as the PHP ASP aspx jsp. This means that the client selection is only the first step, and if further processing is required, the coordinates of the constituency must be submitted to the server. So how does it work?

Create a commendation that has four hidden fields:

<form action= "crop.php" method= "POST" >

<input type= "hidden" name= "x1" value= "/>

<input type= "hidden" name= "y1" value= "/>

<input type= "hidden" name= "x2" value= "/>

<input type= "hidden" name= "y2" value= "/>

<input type= "Submit" name= "submit" value= "Submit"/>

</form>

Then, when initializing Imgareaselect, use the Onselectend () callback function to assign the selected data to these hidden fields, as in the following code:

$ (document). Ready (function () {

$ (' #ladybug '). Imgareaselect ({

Onselectend:function (IMG, selection) {

$ (' input[name= ' x1 "]). Val (selection.x1);

$ (' input[name= ' Y1 "]). Val (selection.y1);

$ (' input[name= ' X2 "]). Val (selection.x2);

$ (' input[name= ' y2 "]). Val (selection.y2);

}

});

});

When you click on the "Submit button", the page will be uploaded to the server, and if you use PHP, use $_post[' x1 ') and so on to get the corresponding coordinate data.

The material originates from the script house ~ ~ ~

About the jquery plugin imgareaselect basic explanation