一、引入文件

<script src="jquery.min.js"></script>

<link rel="stylesheet" href="cropper.css">

<script src="cropper.js"></script>

二、html代码

<div class="box">

    <img id="image">

</div>

<div id="gg">

    <input type="file" id="selectImg"/>

    <button id="commit">确认</button>

    <button id="rotate">旋转</button>

</div>

<!--剪切后预览图片-->

<img id="yulan">

三、js代码

<script>

    //图片选择 触发的事件

    $("#selectImg").change(function(){

        if(!this.files || !this.files[0]){

            return

        }

        var reader = new FileReader();

        reader.onload = function(evt) {

            var replaceSrc = evt.target.result;

            // 更换cropper的图片

            $('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真

        }

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

    })

    //旋转图片

    $("#rotate").click(function(){

        $("#image").cropper('rotate',30)

    })

    //确定裁剪

    $("#commit").on("click",function(){

        var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas

        var base64 = cas.toDataURL('image/jpeg'); // 转换为base64

        console.log(encodeURIComponent(base64))

        $("#yulan").prop('src',base64);//预览

    })

    //初始化  可以给#image元素一张默认图片 就可以直接看效果

    $('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置

           aspectRatio: 100 / 100,//裁剪框的比例

           preview: $('.avatar-preview'),//预览的容器

           autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）

           movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）

           dragCrop:false,//不允许重新开裁剪框

           resizable:false,//不允许改变裁剪框大小

           background:false,

           crop: function(data) {

               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等

               $('#x').val(data.x);

               $('#y').val(data.y);

               console.log(data)

               //console.log('w'+data.width+'   height'+data.height);

           },

           //这几个回调函数

           build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始

               //过渡效果

           },

           built: function (e) { //加载完成  绘制完成 获取到相应的data

           }

    });

四、完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>图片上传测试</title>

    <script src="jquery.min.js"></script>

    <link rel="stylesheet" href="cropper.css">

    <script src="cropper.js"></script>

    <style type="text/css">

        .box {

            width: 400px;

            height: 400px;

        }

        #gg{

            margin-top:50px;

        }

    </style>

</head>

<body>

<div class="box">

    <img id="image">

</div>

<div id="gg">

    <input type="file" id="selectImg"/>

    <button id="commit">确认</button>

    <button id="rotate">旋转</button>

</div>

<!--剪切后预览图片-->

<img id="yulan">

<script>

    //图片选择 触发的事件

    $("#selectImg").change(function(){

        if(!this.files || !this.files[0]){

            return

        }

        var reader = new FileReader();

        reader.onload = function(evt) {

            var replaceSrc = evt.target.result;

            // 更换cropper的图片

            $('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真

        }

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

    })

    //旋转图片

    $("#rotate").click(function(){

        $("#image").cropper('rotate',30)

    })

    //确定裁剪

    $("#commit").on("click",function(){

        var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas

        var base64 = cas.toDataURL('image/jpeg'); // 转换为base64

        console.log(encodeURIComponent(base64))

        $("#yulan").prop('src',base64);//预览

    })

    //初始化  可以给#image元素一张默认图片 就可以直接看效果

    $('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置

           aspectRatio: 100 / 100,//裁剪框的比例

           preview: $('.avatar-preview'),//预览的容器

           autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）

           movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）

           dragCrop:false,//不允许重新开裁剪框

           resizable:false,//不允许改变裁剪框大小

           background:false,

           crop: function(data) {

               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等

               $('#x').val(data.x);

               $('#y').val(data.y);

               console.log(data)

               //console.log('w'+data.width+'   height'+data.height);

           },

           //这几个回调函数

           build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始

               //过渡效果

           },

           built: function (e) { //加载完成  绘制完成 获取到相应的data

           }

    });

</script>

</body>

</html>

cropper文档地址：http://www.jq22.com/jquery-info9322

cropper实现图片剪切上传的更多相关文章

  1. Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...

  2. layui+croppers完成图片剪切上传

    不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  3. cropper，图片剪辑上传工具的使用

    cropper工具是一个功能强,兼容性好的一个图片裁剪和上传工具 GitHub地址:https://github.com/kesixin/Head_Cut_PC <div class=" ...

  4. 图片剪裁上传插件 - cropper

    图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...

  5. vue中使用cropperjs进行图片裁剪上传

    下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id= ...

  6. 第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传

    第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...

  7. 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

    2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...

  8. asp.net实现图片在线上传并在线裁剪

    1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...

  9. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

随机推荐

  1. Python项目--Scrapy框架(一)

    环境 win8, python3.7, pycharm 正文 1.Scrapy框架的安装 在cmd命令行窗口执行: pip install Scrapy 即可完成Scrapy框架的安装 2. 创建Sc ...

  2. JavaSE基础知识（5）—面向对象（5.3访问修饰符）

    一.说明 访问修饰符可以用于修饰类或类的成员(属性.方法.构造器.内部类) 二.特点   名称 本类 本包 其他包的子类 其他包的非子类 private 私有的 √ × × × 缺省 默认 √ √ × ...

  3. Matplotlib 基本用法

    1.基础应用 >>> import matplotlib.pyplot as plt >>> import numpy as np #使用np.linspace定义 ...

  4. C++ 提取网页内容系列之五 整合爬取豆瓣读书

    工作太忙 没有时间细化了 就说说 主要内容吧 下载和分析漫画是分开的 下载豆瓣漫画页面是使用之前的文章的代码 见http://www.cnblogs.com/itdef/p/4171179.html ...

  5. 【转】背后的故事之 - 快乐的Lambda表达式（一）

    快乐的Lambda表达式(二) 自从Lambda随.NET Framework3.5出现在.NET开发者眼前以来,它已经给我们带来了太多的欣喜.它优雅,对开发者更友好,能提高开发效率,天啊!它还有可能 ...

  6. MYSQL性能查看(多指标）

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  7. RISC与CISC比较

    1.RISC与CISC的差异 处理器的指令集可简单分为2种,CISC(complex instruction set computer)以及RISC(reduced instruction set c ...

  8. php流程控制

    return 例子一: <?php function add($a,$b){ echo "echo"; return $a+$b; //return 一般用于function ...

  9. wordpress添加文章固定字段

    让wordpress的文章数据表 增加一个字段,使其能在文章编辑页能编辑,并能通过rest api 获取出来. 例:给文章加一个缩略图字段 litpic 首先 通过mysql 给文章表 wp_post ...

  10. powershell ParameterSet解析

    自定义PowerShell函数,在设置参数的时候中,可以将参数设置为某些情况下可选,某些条件下又设置为必选. 示例代码从网站复制的. function Connect-Somewhere { [Cmd ...