Imgareaselect Plug-in

1, plug-in introduction

Imgareaselect is a jquery plugin that allows users to select rectangular areas with simple, intuitive click-and-drag interface images. The plugin can be used to easily implement image cropping in Web applications, as well as other features such as photo tagging, image editing, and more.
2. Basic usage (simple example)

First Call Imgareaselect-default.css , Jquery-1.7.1.min.js, Imgareaselect.pack.js These three documents (download the official website)

Official website: http://odyniec.net/projects/imgareaselect/

<!--html-->
<Divclass= "Frame"style= "margin:0 0.3em; width:500px; height:467px;float:left;border:2px solid #dcdcdc;"><imgID= "Photo"src=".. /images/img3.jpg "style= "max-width:100%;max-height:100%;" /></Div><DivID= "Preview"style= "width:250px; height:200px; overflow:hidden;border:2px solid #dcdcdc;"><imgsrc=".. /images/img3.jpg "style= "width:250px; height:200px;" /></Div>

functionPreview (IMG, selection) {if(!selection.width | |!selection.height)return; varScaleX = 250/Selection.width; varScaleY = 200/Selection.height; varHei = $ (' #photo '). Height (); varWID = $ (' #photo '). width (); $(' #preview img '). css ({width:Math.round (ScaleX*wid), Height:Math.round (ScaleY*Hei), MarginLeft:-math.round (ScaleX *selection.x1), margintop:-math.round (ScaleY *selection.y1)}); }    $(function () {        $(' #photo '). Imgareaselect ({//aspectratio: ' 1:1 ',Handlestrue, Fadespeed:200, Onselectchange:preview}); });

If there is more than one IMG element in the jquery object, the plugin applies this method to the elements on the inside. In fact, this method not only applies to the IMG element, it supports any block-level element (such as a DIV element with an image background).

Instance:

3. Example Analysis

is to use the Onselectchange () callback function to achieve the effect of selecting a region preview. Since the preview window is 250x200px, the preview will zoom in when the window is less than 250px, and the preview will zoom out when the window is larger than 250px.

In the preview () function, ScaleX and ScaleY are defined first, and their content is 250/selection.width (or height) , That is, when the selection.width is less than 250, this factor acts as a magnifying effect, and vice versa.

Especially noteworthy: the width of the actual figure in the callback function (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. (because my own wide-height is uncertain, so I was acquired)

Imgareaselect Plug-in