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

幾乎每一個網頁是必備圖片上傳，圖片裁剪功能，這里通過cropbox.js插件實現該功能。

$(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('');

})

$('#btnZoomIn').on('click', function(){

cropper.zoomIn();

})

$('#btnZoomOut').on('click', function(){

cropper.zoomOut();

})

});

相關推薦：

總結

以上是生活随笔為你收集整理的cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。