自己仿照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. printf in KEIL C51

    转自:http://blog.csdn.net/it1988888/article/details/8821713 在keil中printf默认是向串口中发送数据的,所以,如果应用该函数,必须先初始化 ...

  2. redis简介及增删改查

    redis 是一个文档(nosql)数据库,工作与内存,主要用做高速缓存 缓存经常会查到的数据 存入的值默认是字符串 使用步骤: 1 从redis.io下载 2 点击redis-server.exe启 ...

  3. 【OSG】将显示的图形窗口化

    窗口化原理 有时为了方便控制场景渲染,需要设置一个合适的图形环境窗口(即窗口化). 创建图形环境的主要步骤如下: (1)通过WindowingSystemInterface类得到系统窗口接口,该系统接 ...

  4. 使用Fiddler重定向App的网络请求

    前言 开发中手机app只能访问生产环境地址,所以给开发调试带来不便,可以通过Fiddler的代理和urlreplace方式解决. 步骤 1.开启Fiddler的代理模式Tools->Teleri ...

  5. linux下安装jenkins

    我们不用离线安装方式 第一步.必须验证java环境 第二步.我们这里使用yum命令进行在线安装,使用service命令进行启动 1.wget -O /etc/yum.repos.d/jenkins.r ...

  6. Angular中sweetalert弹框的使用详解

    最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweeta ...

  7. 打开eclipse编译后的.class文件

    众所周知,用文本编辑器打开.class文件会乱码.我们可以使用命令行打开.class文件项目结构: 代码: public class Synchronized { public static void ...

  8. Ifter Party LightOJ - 1014（水题）

    题意:有C个人,给P个食物,每人吃Q个,剩L个.然后给你P和L(Q>L),让你求Q的可能情况,如果有多种可能,从小到大输出:如果不存在,输出impossible 就是求写出公式 遍历c求P-L的 ...

  9. Zju1610 Count the Colors

    题面: 画一些颜色段在一行上,一些较早的颜色就会被后来的颜色覆盖了. 你的任务就是要数出你随后能看到的不同颜色的段的数目. Input: 每组测试数据第一行只有一个整数n, 1 <= n < ...

  10. #define后面只带有一个标识符

    经常看到有#define后只有一个标识符的语句,这样是做宏开关用 宏定义编译前会被编译器进行替换,只有一个标识符的情况,如果在代码里使用了这个标识符,会被替换为空,也就是相当于没加. 用来做编译开关的 ...