首页 > 编程 > JavaScript > 正文

jQuery用户头像裁剪插件cropbox.js使用详解

2019-11-19 16:24:27
字体:
来源:转载
供稿:网友

几乎每一个网页是必备图片上传,图片裁剪功能,这里通过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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表