HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

jQuery轻量级拖动剪裁头像图片插件

2016-12-5 11:11| 发布者: html5cn| 查看: 871| 评论: 0

摘要: cropbox.js是一款简单轻量级的头像图片剪裁插件。用户可以上传自己的图片,还可以将图片进行放大和缩小,以及对图片进行拖动,最后可以将图片剪裁生成新的头像图片。 ...

  简要教程

  cropbox.js是一款简单轻量级的头像图片剪裁插件。用户可以上传自己的图片,还可以将图片进行放大和缩小,以及对图片进行拖动,最后可以将图片剪裁生成新的头像图片。

  cropbox.js支持纯js,或结合jquery来使用,或通过YUI来使用。

  cropbox.js头像图片剪裁插件屏幕截图

  使用方法

  使用纯js调用插件

  window.onload = function() {

  var options =

  {

  imageBox: '.imageBox',

  thumbBox: '.thumbBox',

  spinner: '.spinner',

  imgSrc: 'avatar.png'

  }

  var cropper = new cropbox(options);

  document.querySelector('#file').addEventListener('change', function(){

  var reader = new FileReader();

  reader.onload = function(e) {

  options.imgSrc = e.target.result;

  cropper = new cropbox(options);

  }

  reader.readAsDataURL(this.files[0]);

  this.files = [];

  })

  document.querySelector('#btnCrop').addEventListener('click', function(){

  var img = cropper.getDataURL()

  document.querySelector('.cropped').innerHTML += '

';

  })

  document.querySelector('#btnZoomIn').addEventListener('click', function(){

  cropper.zoomIn();

  })

  document.querySelector('#btnZoomOut').addEventListener('click', function(){

  cropper.zoomOut();

  })

  };

  和jquery结合使用

  $(window).load(function() {

  var options =

  {

  thumbBox: '.thumbBox',

  spinner: '.spinner',

  imgSrc: '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();

  })

  });

  // use with require js

  paths: {

  jquery: 'js/jquery-1.11.0.min',

  cropbox: 'cropbox'

  }

  });

  require( ["jquery", "cropbox"], function($) {

  var options =

  {

  thumbBox: '.thumbBox',

  spinner: '.spinner',

  imgSrc: '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();

  })

  }

  );

  YUI插件

  YUI().use('node', 'crop-box', function(Y){

  var options =

  {

  imageBox: '.imageBox',

  thumbBox: '.thumbBox',

  spinner: '.spinner',

  imgSrc: 'avatar.png'

  }

  var cropper = new Y.cropbox(options);

  Y.one('#file').on('change', function(){

  var reader = new FileReader();

  reader.onload = function(e) {

  options.imgSrc = e.target.result;

  cropper = new Y.cropbox(options);

  }

  reader.readAsDataURL(this.get('files')._nodes[0]);

  this.get('files')._nodes = [];

  })

  Y.one('#btnCrop').on('click', function(){

  var img = cropper.getDataURL()

  Y.one('.cropped').append('

');

  })

  Y.one('#btnZoomIn').on('click', function(){

  cropper.zoomIn();

  })

  Y.one('#btnZoomOut').on('click', function(){

  cropper.zoomOut();

  })

  })

  cropbox.js图像图片剪裁插件的github地址为:https://github.com/hongkhanh/cropbox

  原文链接:http://www.htmleaf.com/jQuery/Image-Effects/201612034236.html

  原作者:未知

  本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!

  投稿: 2601929995@qq.com


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-23 09:23

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部