快捷導(dǎo)航

jQuery用戶頭像裁剪插件cropbox.js使用詳解

更新時(shí)間：2017年06月07日 10:45:29 作者：pengjunhao

這篇文章主要為大家詳細(xì)介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

幾乎每一個(gè)網(wǎng)頁(yè)是必備圖片上傳，圖片裁剪功能，這里通過(guò)cropbox.js插件實(shí)現(xiàn)該功能。

<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: '.thumbBox',
      spinner: '.spinner',
      imgSrc: 'images/avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#file').on('change', function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $('.imageBox').cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $('#btnCrop').on('click', function(){
      var img = cropper.getDataURL();
      $('.cropped').append('<img src="'+img+'">');
    })
    $('#btnZoomIn').on('click', function(){
      cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
      cropper.zoomOut();
    })
  });
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
在項(xiàng)目中遇到這樣的需求當(dāng)用戶點(diǎn)擊編輯時(shí)，在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點(diǎn)擊“取消”銨鈕，刪除剛剛動(dòng)態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼，一起看看吧
2017-03-03
jquery dataTable 獲取某行數(shù)據(jù)
本篇文章主要介紹了jquery dataTable 獲取某行數(shù)據(jù)的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05
jQuery + html + css 實(shí)現(xiàn)王者榮耀官網(wǎng)首頁(yè)效果&nb
這篇文章主要介紹了jQuery + html + css 實(shí)現(xiàn)王者榮耀官網(wǎng)首頁(yè)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-02-02
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法，學(xué)習(xí)jquery的朋友可以參考下。
2011-04-04
jquery validate.js表單驗(yàn)證的基本用法入門
jquery.validate.js是jquery下的一個(gè)驗(yàn)證插件，功能比較強(qiáng)大，早就有所耳聞但是一只沒(méi)有動(dòng)手用過(guò)，現(xiàn)在在于能夠研究一下了。
2010-05-05
Jquery使用AJAX方法請(qǐng)求數(shù)據(jù)
本文詳細(xì)講解了Jquery使用AJAX方法請(qǐng)求數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
jQuery新的事件綁定機(jī)制on()示例應(yīng)用
從jQuery1.7開(kāi)始，jQuery引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定，下面通過(guò)示例為大家介紹下
2014-07-07
jQuery Dialog 彈出層對(duì)話框插件
網(wǎng)上這種插件很多，但是沒(méi)一個(gè)合適的，大部分都做得很大，功能齊全。于是自己做了這個(gè)小插件，順便學(xué)習(xí)下jQuery插件的寫法。
2010-08-08
jQuery樹(shù)控件zTree使用方法詳解（一）
這篇文章主要為大家詳細(xì)介紹了jQuery樹(shù)控件zTree使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery實(shí)現(xiàn)根據(jù)生日計(jì)算年齡星座生肖
本篇文章主要是對(duì)利用jQuery實(shí)現(xiàn)根據(jù)生日計(jì)算年齡，星座，生肖的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下
2016-11-11