Imgareaselect Chinese Document help note _jquery

First, technical documents
1. Introduction
Imgareaselect is a jquery plug-in, which supports users to select a part of the picture by mouse drag, very fashion. In addition, the selection of the image area based on the application of some of the site's other technologies, such as picture drag, image editing and so on.
2. Basic Usage
This plugin is invoked on jquery via the Imgareaselect () method, which operates on images within elements of HTML.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' Img#photo '). Imgareaselect ({
Handles:true,
Onselectend:somefunction
});
});
</script>

If there is more than one IMG element in the jquery object, the plugin will apply this method to the elements inside. In fact, this method not only applies to the IMG element, it supports any block-level elements (such as DIV elements with an image background).
Similar to other jquery plug-ins, this plugin can be initialized in the $ (document). Ready () or $ (window). Load () handle.
3. Option
Users can make customizations in many aspects of the plugin, and users do this by using plug-in options (these options will work when the plug-in initializes). 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 for plug-in elements (see below: 5, elements and classes) Default:imgareaselect
Disable	If set to True, the plugin will not work (but the image is still visible)
Enable	If set to True, the plugin will function 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, some small "rectangles" of corner points) Default:false
Hide	If set to True, hide the selection box
ImageHeight	The true height of the image (because it is possible to be indented by CSS)
ImageWidth	The true width of the image (because it is possible to be a CSS bloom)
Instance	Setting the True,imgareaselect () function returns a reference to the selection area image so that the API can be used further. (see 8, API method)
Keys	Enable/Turn off keyboard support (see 7, keyboard support) Default:false
MaxHeight	Limit 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 the Select area will start a new option (in other words, whether the user can only move/zoom to the selection area) Default:false
Remove	If set to true, the plug-in is completely removed
Resizable	Determines whether the selection can be resized Default:true
Resizemargin	Change size mode is enabled when you select more than pixel area width
Show	If set to True, select area will be visible
X1 Y1	The coordinates of the upper-left corner of the selection box when initializing
X2 Y2	The coordinates of the lower-right corner of the selection box when initializing
ZIndex	Set the value of the z-index of the element to which this plug-in is acting, in general, Imgareaselect can always calculate its value automatically, but in rare cases it is necessary to set it.
OnInit	The function that is called when the plug-in initializes (see 6, callback function)
Onselectstart	The function that is called when the selection is started (see 6, callback function)
Onselectchange	function called when changing selection area (see 6, callback function)
Onselectend	function called when the selection ends (see 6, callback function)

4. Style sheet
There are three more style sheets issued by the plugin:

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

5. Elements and Classes
This plug-in represents the selection area by creating several div elements, 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.

Class name	The object assigned to
Imgareaselect-selection	Selected area
Imgareaselect-border1 Imgareaselect-border2 Imgareaselect-border3 Imgareaselect-border4	Select the four border of the range, consisting of four Div
Imgareaselect-handle	Adjustable Resize handle (four or eight divs, not shown if not enabled)
Imgareaselect-outer	No area selected, consisting of four divs

The following object diagram shows how these elements of this plug-in are laid out:

The prefix "Imgareaselect" is the default prefix, which 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.

6. Callback function

The callback function (when set OnInit, Onselectstart, Onselectchange, or Onselectend option) receives two parameters, the first option is a reference to the image applied by the plug-in, and the other is to render the currently selected object, which has six properties.

Properties	Describe
X1 Y1	Select the coordinates of the upper-left corner of the range
X2 Y2	Select the coordinates of the lower-right corner of the range
Width	Select the width of the range
Height	Select the height of the range

For ease of understanding, here are examples of callback functions that are executed when the selection is complete:

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

Onselectend:function (IMG, selection) {

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

}

});

7. Keyboard support

If the option "Keys" is set to true, we can move through the selection box by pressing the key on the keyboard. The following keys are available, and the default features are as follows:

key	Action
direction key	moves the selection in 10 pixels each time
shift+ Direction key	Move selection with 1 pixels
Ctrl + Direction key	Expand selection in 10 pixels each time
ctrl+shift+ direction key	expands the selection at 1 pixels each time

Of course you can also override the default key setting by setting the "Keys" option, which has the following properties:

Property	Describe
Direction key	To set the function of the direction key
Shift	Set the function of the SHIFT key
Ctrl	Set the CTRL key function
Alt	Set the function of the ALT key

Each property sets the value in pixels, or less than 1, to indicate how many pixels to move/resize when this key is pressed, or to specify that its value is "string" to specify that it is "resize" mode. For example:

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

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

});

This example sets the "arrow keys" to move the selection 15 pixels, holding down the CTRL key moves 5 pixels, while holding down the SHIFT key to switch to resize mode.

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

8. API method

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

To use these methods, you first need a plug-in object that can invoke the Imgareaselect () function and make its option "instance" set to true:

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

You can now use this object to invoke the public method. For example, set a default predefined range:

Ias.setselection (M, N, True);

Ias.setoptions ({show:true});

Ias.update ();

As soon as initialization is complete, you can use these API methods. These API methods are listed below:

Method	Describe
GetOptions	GetOptions () --Returns the configuration of the current option Returns: An object that contains the current option configuration (typically a JSON object)
SetOptions	SetOptions (newoptions) --Set plug-in options Parameters: Newoptions – Option Configuration object (typically a JSON object)
getselection	Strong>getselection ([Noscale]) --Get current selection   Parameters: Noscale (optional) – if set to true, no scaling operation is performed for the returned selection.   back: objects in select area
SetSelection	SetSelection (x1, y1, x2, y2, [Noscale]) --Set the current selection Parameters: x1– the upper-left corner of the selection area x coordinates y1– Select the upper left corner y-coordinate x2– Select the lower right corner of the region x coordinates y2– Select the lower right corner y-coordinate Noscale (optional) – if set to True, the image will not be scaled Note: This method only sets the selection area within the plug-in, does not immediately observe the changes in the selection, if you need to immediately display the changed area, you must call the update () function after using the Setselect () function, and let the show option be true.
Cancelselection	Cancelselection () --Cancel the current selection Note : This method hides the "Select/Not selected" area, so you do not have to call the update () function.
Update	Update ([resetkeypress]) --Update plug-in configuration Parameters: Resetkeypress (optional) – if set to false, the key of this instance will be reset (that is, not available)

Second, simple examples

1, width or height limit

The MinWidth, MinHeight, MaxWidth, and maxheight options allow you to set the range of your selections. 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 height/width ratio

Configure the Aspectratio option and set it to "4:3":

$ (document). Ready (function () {

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

});

3. Set the initial option area

Configure x1, y1, x2 and y2 options:

$ (document). Ready (function () {

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

});

Examples of callback functions

1. Selection Preview

In the following code snippet, the Onselectchange () callback function implements the effect of selecting a range 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 '

});

}

here , you insert the same picture after the original image through the 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});

});

Because the preview window is 100x100px, the preview image zooms in when the screenshot window is less than 100px, and the preview zooms out when the screenshot window is larger than 100px. The two effects are shown below:

Screenshot 1 when the screenshot window is larger than 100px

Screenshot 2 when the screenshot window is less than 100px

It should be explained that there is a technique used to make this effect. The most critical one is equal ratio scaling. It requires two pictures, the first image is the original , the second figure is the selection of the region after the graph, with the first diagram of the selection of coordinates +css control to produce a second diagram, in fact, two charts are the same, but through the CSS control of the second picture of the display area and scaling ratio. The evidence is as follows:

"Evidence One" inserts "src" as a picture of "Ferret.jpg" in the $ (document) Ready () function by InsertAfter. Again, in this section of the "Overflow: ' Hidden '," This line of code is to let more than 100px high width of the picture 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, the factor plays a magnifying role, whereas it reduces the effect.

It is noteworthy that:

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

2, the coordinates of the submission selection

If you need to implement a true screenshot , you must use server-side support, such as PHP ASP aspx jsp. That 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 to achieve it?

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);

}

});

});

So when you click the "Submit Button", the page will be uploaded to the server, if the use of PHP, using $_post[' X1 ' and so on to get the corresponding coordinate data.