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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery冲突问题解决方法
Jan 19 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python映射拆分操作符用法实例
2015/05/19 Python
python3中str(字符串)的使用教程
2017/03/23 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python如何对XML 解析
2020/06/28 Python
美国电视购物:QVC
2017/02/06 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
公务员的自我鉴定
2013/10/26 职场文书
公司股权转让协议书
2014/04/12 职场文书
部队个人年终总结
2015/03/02 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
python Polars库的使用简介
2021/04/21 Python
Python中的socket网络模块介绍
2022/07/23 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python