jQuery頭像裁切工具jcrop用法實例(附示範與demo源碼下載)

jQuery頭像裁切工具jcrop用法實例(附示範與demo源碼下載)_jquery

WBOY

發布： 2016-05-16 15:18:47

原創

1260 人瀏覽過

本文實例講述了jQuery頭像裁剪工具jcrop用法。分享給大家參考，具體如下：

頭像裁切工具目前比較流行的是flash和jquery的。個人覺得用jquery的比較好，因為程式碼仔細研究一下，基本上可以明白怎麼回事，想改的話也比較容易。

有一個例子，請參考：jcrop例子demo ，是根jcrop的例子改的，加入以下二個特點：

1，居中顯示，並且可拖拉，改變截取的大小
2，預覽的圖片，根拖拉的大小成比例。

以下是js程式碼，作了簡單的封裝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
  <title>jcrop 图片拖动</title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="demos.css" type="text/css" />
 </head>
 <body>
 <div id="outer">
 <div class="jcExample">
 <div class="article">
  <h1>上传头像拖动例子</h1>
  <table>
   <tr>
    <td>
     <img src="sago.jpg" id="target" alt="Flowers" />
    </td>
    <td>
     <div style="width:100px;height:100px;overflow:hidden;" id="aa">
      <img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
     </div>
    </td>
   </tr>
  </table>
 </div>
 </div>
 </div>
 </body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
  var oop = this;
  this.option = {
    x:170,
    y:110,
    w:350,
    h:200,
    t:'target',
    p:'preview',
    o:'aa'
  }
  this.init = function(){
    oop.target();
  }
  this.target = function(){
   $('#'+oop.option['t']).Jcrop({
     onChange: oop.updatePreview,
     onSelect: oop.updatePreview,
     aspectRatio: 1,
     setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ],
     bgFade:   true,
     bgOpacity: .5
    });
  }
  this.updatePreview = function(obj){
    if (parseInt(obj.w) > 0)
    {
     var rx = $('#'+oop.option['o']).width()/ obj.w;
     var ry = $('#'+oop.option['o']).height()/ obj.h;
     $('#'+oop.option['p']).css({
      width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px',
      height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px',
      marginLeft: '-' + Math.round(rx * obj.x) + 'px',
      marginTop: '-' + Math.round(ry * obj.y) + 'px'
     });
    }
  }
}
</script>
</html>

登入後複製

jquery jcrop結合jquery ajax upload的話，可以讓頭像上傳截取功能，很人性化。

完整實例程式碼點擊此處本站下載。

更多關於jQuery外掛相關內容有興趣的讀者可查看本站專題：《jQuery常用外掛及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。