首頁 >web前端 >js教程 >jQuery使用者頭像裁切外掛程式cropbox.js實例分享

jQuery使用者頭像裁切外掛程式cropbox.js實例分享

小云云
小云云原創
2018-01-10 10:28:482058瀏覽

本文主要為大家詳細介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。

幾乎每一個網頁都是必備圖片上傳,圖片裁切功能,這裡透過cropbox.js外掛程式實現該功能。


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropbox.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: &#39;.thumbBox&#39;,
      spinner: &#39;.spinner&#39;,
      imgSrc: &#39;images/avatar.png&#39;
    }
    var cropper = $(&#39;.imageBox&#39;).cropbox(options);
    $(&#39;#file&#39;).on(&#39;change&#39;, function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $(&#39;.imageBox&#39;).cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $(&#39;#btnCrop&#39;).on(&#39;click&#39;, function(){
      var img = cropper.getDataURL();
      $(&#39;.cropped&#39;).append(&#39;<img src="&#39;+img+&#39;">&#39;);
    })
    $(&#39;#btnZoomIn&#39;).on(&#39;click&#39;, function(){
      cropper.zoomIn();
    })
    $(&#39;#btnZoomOut&#39;).on(&#39;click&#39;, function(){
      cropper.zoomOut();
    })
  });
</script>

相關推薦:

Jquery圖片裁切外掛程式

5 最新的jQuery 圖片裁切外掛程式

jQuery實作圖片上傳與裁切外掛程式Croppie_jquery

以上是jQuery使用者頭像裁切外掛程式cropbox.js實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn