当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery用户头像裁剪插件cropbox.js使用详解

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网