jquery Plugin Imgareaselect Example explained two

In the previous essay http://www.cnblogs.com/chenguanai/p/6883401.html, has already understood the picture upload preview and the clipping function; so this time, look at the imgareaselect cutting function ~ ~ ~

sometimes, when we cut an area, there will be a large middle and small three heads show ~ ~ ~ that is, as shown, when the right of the original selection, the left side will display the big small three pictures, easy to choose ~ ~ ~

First step: introduce the plugin and JS package first

Step two: Div Layout

  <div class= "mtb15px clearfix" > <!--big box--<div class= "preview" > <!--left Big box-- <div> 
Step three: Add Style (for Easy viewing, The border is not removed Here)
<style>/  * External Large frame */.clearfix{border:1px solid red;width:100%;height:500px;} /* left Preview Box */.preview{border:1px solid green;float:left;width:20%;height:500px;} /* Right picture selection box */.orign{border:1px solid blue;float:left;width:500px;height:500px;border:1px Solid gray;margin-left:30px ;} div.preview_div{overflow:hidden;margin:auto;border:1px Solid black;}  div.p_photo_l{width:202px;height:152px;}  div.p_photo_m{width:52px;height:52px;}  div.p_photo_s{width:32px;height:32px;} #img_origin {float:left;margin-left:50px;height:300px;width:200px;} </ Style>  
　　
In this step you can do the following: (left default is empty, the right side is the image you insert) now does not have the crop function, just insert the picture
The final step, and the most important one, to achieve the cutting function
<script> $ (document). Ready (function () {//construct imgareaselectapi imgareaselectapi = $ (' #img_origin '). imgarease Lect ({persistent:true,//true, Clicking outside the selection does not enable a new selection (only move/adjust an existing Selection) instance:true,//true, returns a Imgareas Elect an instance of the image that is bound to, you can use the API method Onselectchange:preview,//the callback function Show:true when the selection is Changed,//the selection will show Han    dles:true,//true, The adjustment handle is displayed in the selection area resizable:true,//true, The selection area is resizable MinWidth:Math.floor (400/4),      Selected minimum width minHeight:Math.floor (300/4),//min. height selected aspectratio: ' 400:300 '//selection display ratio 400:300            });                    The default selection $ (' #img_origin ') that is triggered when loading. load (function () {var form = $ (' #coordinates_form ');           Gets the value of x, y, w, h var left = parseint (form.children ('. x '). val ());          var top = parseint (form.children ('. y '). val ());          var width = parseint (form.children ('. w '). val ());              var height = parseint (form.children ('. h '). Val ());      Imgareaselectapi is an instance of the image Img_origin instance explained//setselection (), set the coordinates of the Selection//update (), update          Imgareaselectapi.setselection (left, top, left+width, top+height);      Imgareaselectapi.update ();            }); Preview method img Picture parameter, Selection selection parameter function preview (img, selection) {$ (' div.preview_div img '). attr (' src ', "./i            Mages/1.jpg ");                  var form = $ (' #coordinates_form ');          Reset the value of x, y, w, H form.children ('. x '). val (selection.x1);          Form.children ('. y '). val (selection.y1);          Form.children ('. W '). val (selection.x2-selection.x1);                    Form.children ('. H '). Val (selection.y2-selection.y1); Preview_photo () The picture adjustment on the left (consistent with the picture of the Selection) preview_photo (' p_photo_l ', selection);
          Preview_icon () left two, sazo picture Adjustment//(and The image of the selection is consistent, why not use the Preview_photo () method, because the left one is a rectangle, left two left three is a square) preview_i          Con (' p_photo_m ', selection);      Preview_icon (' p_photo_s ', selection); }//preview_photo () method The picture adjustment on the left (consistent with the picture of the Selection)//div_class is the class function Preview_photo of the corresponding Div (div_class, s                   Election) {var div = $ (' Div. ' +div_class);          Gets the width of the div with the height var = div.outerwidth ();                    var height = div.outerheight ();          The ratio of the display area to the width of the selection picture, the ratio of the height to var ScaleX = width/selection.width;                    var ScaleY = height/selection.height; The CSS controls the scaling of the image as well as the offset Div.find (' img '). CSS ({width:Math.round (scaleX * $ (' #img_origin '). outerwidth ()) + ' px ', height:Math.round (scaleY * $ (' #img_origin '). outerheight ()) + ' px ', marginleft: '-' +MATH.R Ound (scaleX * selection.x1) + ' px ', margintop: '-' +math.round (scaleY * selection.y1) + ' px '});           } The//preview_icon () method Zo the picture adjustment and Preview_photo () similar (the zoom ratio we require here is 1:1 not 4:3) function Preview_icon (           div_class, Selection) {var div = $ (' Div. ' +div_class);                 Gets the width and height of the div as the width and height of the div are the same as var height = div.outerwidth ();                   var ScaleY = height/selection.height;              CSS controls the scale and offset of the image//the left offset here discards a portion (SELECTION.WIDTH-SELECTION.HEIGHT)/2 div.find (' img '). CSS ({ Width:Math.round (scaleY * $ (' #img_origin '). outerwidth ()) + ' px ', height:Math.round (scaleY * $ (' #img_ori Gin '). outerheight ()) + ' px ', marginleft: '-' +math.round (scaleY * (selection.x1) (selection.width-selection.           Height)/2) + ' px ', margintop: '-' +math.round (scaleY * selection.y1) + ' px '});  }        });   　 </script>
Now you can drag and drop the image to show the desired area on the left ~ ~ ~
This article refers to http://blog.csdn.net/motian06/article/details/8017589# (originally written in html5), but I do not, it changed to a div ~ ~ ~
jquery Plugin Imgareaselect Example explained two