jQuery用户头像裁剪插件cropbox.js怎么用
这篇文章主要介绍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用户头像裁剪插件cropbox.js怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!