自己仿照github上的例子写的demo，github上的例子太抽象了，自己写的最适合自己，通俗易懂。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

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

    <style>

        img {

            max-width: 100%; /* This rule is very important, please do not ignore this! */

        }

        .prev{

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="container">

        <img id="image" src="./img/picture.jpg">

    </div>

    <br><br>

    <!--crop是对剪切窗口的操作，move是对图片的操作-->

    <div>

        <input type="button" value="crop" id="btnCrop" />

        <input type="button" value="move" id="btnMove" />

        <input type="button" value="16:9" id="169">

        <input type="button" value="1:1" id="11">

        <input type="button" value="get" id="getCanvas">

    </div>

    <br><br>

    <!--图片截取的结果显示在这里-->

    <div class="prev" style="width: 500px; height: 500px; overflow: hidden"></div>

    <div class="prev" style="width: 300px; height: 300px; overflow: hidden"></div>

    <div class="prev" style="width: 200px; height: 200px; overflow: hidden"></div>

    <br><br>

    <div id="getCroppedCanvas" style="width:500px; height:500px; overflow:hidden;"></div>

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

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

    <script>

        $(function(){

            var image = document.getElementById("image");

            //可以通过$().cropper(options)方法来设置参数。如果想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。

            var cropper = new Cropper(image, {

                aspectRatio: 16 / 9,  //宽高比

                preview: '.prev',  //预览窗口

                guides: false,  //裁剪框的虚线

                autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8

                dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域

                movable: true,  //是否允许移动剪裁框

                resizable: true,  //是否允许改变裁剪框的大小

                zoomable: true,  //是否允许缩放图片大小

                mouseWheelZoom: true,  //是否允许通过鼠标滚轮来缩放图片

                touchDragZoom: true,  //是否允许通过触摸移动来缩放图片

                rotatable: true,  //是否允许旋转图片

                minContainerWidth: 200,  //容器的最小宽度

                minContainerHeight: 200,  //容器的最小高度

                minCanvasWidth: 0,  //canvas 的最小宽度（image wrapper）

                minCanvasHeight: 0,  //canvas 的最小高度（image wrapper）

                strict: true,

                crop: function(e) {  //当改变剪裁容器或图片时的事件函数

                    console.log(e.detail.x);

                    console.log(e.detail.y);

                    console.log(e.detail.width);

                    console.log(e.detail.height);

                    console.log(e.detail.rotate);

                    console.log(e.detail.scaleX);

                    console.log(e.detail.scaleY);

                },

                build: function () {

                    console.log('build');

                },

                built: function () {

                    console.log('built');

                },

                cropstart: function (e) {

                    console.log('cropstart', e.detail.action);

                },

                cropmove: function (e) {

                    console.log('cropmove', e.detail.action);

                },

                cropend: function (e) {

                    console.log('cropend', e.detail.action);

                }

            });

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

                cropper.setDragMode("crop");

            });

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

                cropper.setDragMode("move");

            });

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

                cropper.setAspectRatio(1,1);

            });

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

                cropper.setAspectRatio(16,9);

            });

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

                $("#getCroppedCanvas").html(cropper.getCroppedCanvas());

            });

        });

    </script>

</body>

</html>

API

https://www.awesomes.cn/repo/fengyuanchen/cropper

图片截取插件Cropper的更多相关文章

  1. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  2. vue 裁剪图片，插件Cropper的使用

    全局安装    npm install cropperjs 如果想本项目安装,方便移植:   import Cropper from 'cropperjs'   --save    这样的话,本地 p ...

  3. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

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

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

  5. 使用JQuery插件Jcrop进行图片截取

    Jcrop插件本身并不含有图片截取功能,它仅仅是在前端层面构建一套截取动画效果并产生4个坐标点,插件使用者将这4个坐标点传回至服务器接口上进行截取操作.其优点是具有较高的通用性.浏览器兼容性(IE6+ ...

  6. Android第三方开源图片裁剪截取：cropper

     Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...

  7. 移动端 H5图片裁剪插件，内置简单手势操作

    前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...

  8. 5 款最新的 jQuery 图片裁剪插件

    这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...

  9. jquery头像上传剪裁插件cropper的前后台demo

    因为一个项目要做一个头像上传的功能,因此选择了使用jquery的头像插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件,但是在使用的时候,有一个很大的坑需要注意,那就 ...

随机推荐

  1. 树莓派与Arduino Leonardo使用NRF24L01无线模块通信之基于RF24库 (四) 树莓派单子节点查询

    考虑到项目的实际需要,树莓派作为主机,应该只在需要的时候查询特定节点发送的数据,因此接收到数据后需要根据头部判断是否是自己需要的数据,如果不是继续接收数据,超过一定时间未查询到特定节点的数据,则退出程 ...

  2. express框架结合ejs模板引擎使用

    我们在项目里建立一个views文件夹(必须),如果你不想使用views文件夹的话需要调用app.set("views","自定义文件夹名"),然后在里面建立一个 ...

  3. Selenium WebDriver 中鼠标和键盘事件分析及扩展（转）

    文章转自:http://www.ibm.com/developerworks/cn/java/j-lo-keyboard/

  4. 【版本管理】git本地操作

    1.初始化一个Git仓库,使用git init命令. 2.添加文件到Git仓库,分两步: • 第一步,使用命令git add 文件名,注意,可反复多次使用,添加多个文件: • 第二步,使用命令git ...

  5. 【HLSDK系列】groupinfo的基本用法

    如果你经常写AMXX,你应该会知道有个 pev->groupinfo 变量,但我猜大部分人都不会用这个变量,这个变量涉及很多实体处理功能,下面列举几个最常用的. ① 玩家与非玩家实体之间的碰撞检 ...

  6. 【AGC010F】Tree Game

    Description 有一棵\(n\)个节点的树(\(n \le 3000\)),第\(i\)条边连接\(a_i,b_i\),每个节点\(i\)上有\(A_i\)个石子,高桥君和青木君将在树上玩游戏 ...

  7. 【BZOJ1502】【NOI2005】月下柠檬树

    Portal 传送门 Solution 显然的是,每一个圆的影子,就是从树上的圆按光线方向平移至地面的圆.至于两个圆之间的连接部分,则是每两个在树上相邻的圆的,对应的影子圆的,公切线围起来的部分,如下 ...

  8. BZOJ2878 [Noi2012]迷失游乐园 【基环树 + 树形dp + 期望dp】

    题目链接 BZOJ2878 题解 除了实现起来比较长,思维难度还是挺小的 观察数据范围发现环长不超过\(20\),而我们去掉环上任何一个点就可以形成森林 于是乎我们枚举断掉的点,然后只需求出剩余每个点 ...

  9. Linux内核分析实验三----跟踪分析Linux内核的启动过程

    一.Linux内核源代码介绍 1.根目录 arch/x86目录下的代码是我们重点关注的,arch中包括支持不同CPU的源代码. init目录下包含内核启动相关的代码,如main.c(start_ker ...

  10. Android Studio自动生成UML关系类图

    android studio 根据源码自动生成UML的插件介绍http://www.jianshu.com/p/cbccd831cf01 simpleumlhttps://plugins.jetbra ...