本文主要为大家详细介绍了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: '.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>
相关推荐：
jquery图片裁剪插件
5 款最新的 jquery 图片裁剪插件
jquery实现图片上传和裁剪插件croppie_jquery
以上就是jquery用户头像裁剪插件cropbox.js实例分享的详细内容。