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