鸿 网 互 联 www.68idc.cn

当前位置 : 主页 > 网站制作教程 > javascript > >

jQuery用户头像裁剪插件cropbox.js实例分享

来源:互联网 作者:佚名 时间:2018-01-12 18:09
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能。 script src=js/jquery-1.1
本文主要为大家详细介绍了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>
网友评论
<