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

2024-11-29 21:15:55

几乎每一个网页是必备图片上传，图片裁剪功能，这里通过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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入)  <link rel="stylesheet" type=&qu
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)

本文实例讲述了jQuery头像裁剪工具jcrop用法.分享给大家供大家参考,具体如下: 头像裁剪工具目前比较流行的是flash和jquery的.个人觉得用jquery的比较好,因为代码仔细研究一下,基本上能明白怎么回事,想改的话也比较容易. 有一个例子,请参考:jcrop例子demo ,是根jcrop的例子改的,添加以下二个特点: 1,居中显示,并且可拖拉,改变截取的大小 2,预览的图片,根拖拉的大小成比例. 以下是js代码,作了简单的封装 <!DOCTYPE html PUBLIC "-
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
jquery轻量级数字动画插件countUp.js使用详解

CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title>  <
jQuery表单校验插件validator使用方法详解

validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能. validator的基本使用 1. 需要引入的文件 ① jQuery类库 ② 插件的js文件官网 2.表单校验插件validator的基本语法在rules中通过校验规则名称使用校验规则 ,在messages中定义该规则对应的错误提示信息.  <script src="../lib/jquery.js"
vue图片裁剪插件vue-cropper使用方法详解

本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法,供大家参考,具体内容如下我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4:3的固定比例进行裁剪,裁剪后的效果但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdea
jquery表单验证插件validation使用方法详解

一.如何使用引入js文件 <script src="jquery.js"></script> <script src="jquery.validate-1.13.1.js"></script> 编写html页面,这里仅以用户名.密码为例 <body> <form id="demoForm"> <fieldset> <legend>用户登录</l
jQuery html表格排序插件tablesorter使用方法详解

tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="
移动端日期插件Mobiscroll.js使用详解

mobiscroll js日期插件的基础入门案例,移动端开发过程中可能会用到. <html> <head> <meta charset="UTF-8"> <title>mobiscroll</title> <link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css&q
JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】原创

本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig
jQuery.validate.js表单验证插件的使用代码详解

Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
jQuery 图片查看器插件 Viewer.js用法简单示例

本文实例讲述了jQuery 图片查看器插件 Viewer.js用法.分享给大家供大家参考,具体如下: html:  <link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" > <script src="/js/viewer.min.js"></script> &l

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

相关推荐

随机推荐