大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery用户头像裁剪插件cropbox.js怎么用

这篇文章主要介绍jQuery用户头像裁剪插件cropbox.js怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司主营句容网站建设的网络公司,主营网站建设方案,app软件开发公司,句容h5重庆小程序开发搭建,句容网站营销推广欢迎句容等地区企业咨询

几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能。




  $(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('');
    })
    $('#btnZoomIn').on('click', function(){
      cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
      cropper.zoomOut();
    })
  });

以上是“jQuery用户头像裁剪插件cropbox.js怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网页名称:jQuery用户头像裁剪插件cropbox.js怎么用
新闻来源:http://dzwzjz.com/article/pgjijd.html
在线咨询
服务热线
服务热线:028-86922220
TOP