jQuery外掛程式ImgAreaSelect 執行個體講解二

標籤：改變   邊框   nat   floor   圖片   jquer   ext   doc   載入   

在上一篇隨筆http://www.cnblogs.com/chenguanai/p/6883401.html中，已經瞭解了頭像的上傳預覽和裁剪功能；那麼這次就再看一下imgareaselect的裁剪功能~~~

有時候，我們裁剪某一地區時，分別會有大中小三個頭像顯示著~~~也就是如所示，當在右邊的原圖選擇時，左邊會分別顯示大中小三個頭像，便於使用者選擇~~~

 

 

 

 第一步：先引入外掛程式和js包

<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> <script type="text/javascript" src="../jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script> 

第二步：div布局

 

  <div class="mtb15px clearfix">   <!--大框-->        <div class="preview">         <!--左邊大框-->            <div>              <h3>Large</h3>                  <div class=‘preview_div p_photo_l‘><img src="./images/1.jpg" class="nophoto_l"/></div>                              </div>              <div>               <h3>Middle</h3>                 <div class=‘preview_div p_photo_m‘><img src="./images/1.jpg" class="nophoto_m"/></div>                              </div>              <div>               <h3>Small</h3>                  <div class=‘preview_div p_photo_s‘><img src="./images/1.jpg" class="nophoto_s"/></div>                            </div>          </div>          <div class="origin">   <!--右邊大框-->                   <h3>選擇地區 </h3>                    <img id=‘img_origin‘ src="./images/1.jpg"/>            <form id=‘coordinates_form‘ action="/profile/upload-photo/save" method="post">                  <input type=‘hidden‘ name=‘x‘ class=‘x‘ value=‘0‘/>                  <input type=‘hidden‘ name=‘y‘ class=‘y‘ value=‘0‘/>                  <input type=‘hidden‘ name=‘w‘ class=‘w‘ value=‘282‘/>                  <input type=‘hidden‘ name=‘h‘ class=‘h‘ value=‘211‘/>              </form>       </div>     </div>  

第三步：加樣式（為了方便查看，邊框在這裡就不去除了）

<style>  /*外部大框*/.clearfix{border: 1px solid red;width: 100%;height: 500px;}/*左邊預覽框*/.preview{border: 1px solid green;float: left;width: 20%;height: 500px;}/*右邊圖片選擇框*/.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>  

　　

到這一步就可以實現這如下效果：（左邊預設為空白，右邊是自己插入的圖片）現在並沒有裁剪功能，只是插入的圖片

 

 

 最後一步，也是最重要的一部，實現裁剪功能

 

 

<script>  $(document).ready(function(){      //構造imgAreaSelectApi      imgAreaSelectApi = $(‘#img_origin‘).imgAreaSelect({          persistent : true,  // true，選區以外點擊不會啟用一個新選區（只能移動/調整現有選區）          instance : true,    // true，返回一個imgAreaSelect綁定到的映像的執行個體，可以使用api方法          onSelectChange : preview,   // 改變選區時的回呼函數          show : true,    // 選區會顯示          handles : true, // true，調整控點則會顯示在選擇地區內          resizable : true,   // true， 選區面積可調整大小          minWidth : Math.floor(400/4),   // 選取的最小寬度          minHeight : Math.floor(300/4),  // 選取的最小高度          aspectRatio : ‘400:300‘ // 選區的顯示比率 400:300      });            //載入時觸發的預設選區      $(‘#img_origin‘).load(function(){          var form = $(‘#coordinates_form‘);                    //擷取 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 就是映像img_origin的執行個體 上邊instance已解釋          //setSelection(),設定選區的座標          //update(),更新          imgAreaSelectApi.setSelection(left, top, left+width, top+height);          imgAreaSelectApi.update();      });            //preview方法 img圖片參數，selection選區參數      function preview(img, selection){          $(‘div.preview_div img‘).attr(‘src‘,"./images/1.jpg");            var form = $(‘#coordinates_form‘);                  //重新設定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() 左一的圖片調整（與選區的圖片顯示一致）          preview_photo(‘p_photo_l‘, selection);
          //preview_icon() 左二，左三的圖片調整          //（與選區的圖片顯示一致，為何不用preview_photo()方法呢，因為左一的是長方形，左二左三是正方形）          preview_icon(‘p_photo_m‘, selection);          preview_icon(‘p_photo_s‘, selection);      }            //preview_photo()方法 左一的圖片調整（與選區的圖片顯示一致）      //div_class是對應div的class      function preview_photo(div_class, selection){          var div = $(‘div.‘+div_class);                   //擷取div的寬度與高度          var width = div.outerWidth();          var height = div.outerHeight();                    //顯示地區與選區圖片比例 寬度之比，高度之比          var scaleX = width/selection.width;          var scaleY = height/selection.height;                    //css 控製圖片的縮放以及位移量          div.find(‘img‘).css({              width : Math.round(scaleX * $(‘#img_origin‘).outerWidth())+‘px‘,              height : Math.round(scaleY * $(‘#img_origin‘).outerHeight())+‘px‘,              marginLeft : ‘-‘+Math.round(scaleX * selection.x1)+‘px‘,              marginTop : ‘-‘+Math.round(scaleY * selection.y1)+‘px‘          });           }          //preview_icon()方法 左二左三的圖片調整 和preview_photo()相似 （我們這裡要求的縮放的寬高之比1:1不是4:3）      function preview_icon(div_class, selection){          var div = $(‘div.‘+div_class);           //擷取div的寬度與高度 因為這裡div的寬度和高度相同          var height = div.outerWidth();                 var scaleY = height/selection.height;                   //css 控製圖片的縮放以及位移量          //這裡左邊位移量捨棄了一部分(selection.width - selection.height)/2          div.find(‘img‘).css({              width : Math.round(scaleY * $(‘#img_origin‘).outerWidth())+‘px‘,              height : Math.round(scaleY * $(‘#img_origin‘).outerHeight())+‘px‘,              marginLeft : ‘-‘+Math.round(scaleY * (selection.x1 + (selection.width - selection.height)/2))+‘px‘,              marginTop : ‘-‘+Math.round(scaleY * selection.y1)+‘px‘          });           }        });  </script>   　

 現在就可以拖拽圖片在左邊顯示想要的地區了~~~~

 

此文參照http://blog.csdn.net/motian06/article/details/8017589#（原文用html5寫的），但我還不會，就改成div了~~~~

 

jQuery外掛程式ImgAreaSelect 執行個體講解二