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


Posted in jQuery onJune 07, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
Jquery EasyUI $.Parser
Jun 02 #jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
You might like
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python2 与python3的print区别小结
2018/01/16 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Python xlwt模块使用代码实例
2020/06/10 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
用Python制作音乐海报
2021/01/26 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
总裁岗位职责
2013/12/04 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
2014年加油站工作总结
2014/12/04 职场文书
《去年的树》教学反思
2016/02/18 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书