自己仿照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. C#简单窗体应用程序（二）

    使用C#创建控制台应用程序的基本步骤: (1)创建项目: (2)用户界面设计: (3)属性设置: (4)编写程序代码: (5)保存.调试.运行: 例题:设计登录界面,效果如下: 第一步:创建项目: 文 ...

  2. Docker基础教程

    一.Docker是什么? KVM, Virtualbox, Vmware是虚拟出机器,让每个实例看到一个单独的机器:而Docker是虚拟出操作系统,实现应用之间的隔离,让各个应用觉得自己有一个自己的操 ...

  3. *** error 65: access violation at C:0x001B : no 'execute/read' permission

    转自:http://blog.csdn.net/chenqiai0/article/details/7827071 很多人在进行串口调试的时候会遇到这个问题,请大家略看我的代码,解决方法在其中 //实 ...

  4. 蜗牛慢慢爬 LeetCode 20. Valid Parentheses [Difficulty: Easy]

    题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the i ...

  5. Beta阶段——第五篇 Scrum 冲刺博客

    i. 提供当天站立式会议照片一张: ii. 每个人的工作 (有work item 的ID) (1) 昨天已完成的工作: 对宿舍权限的管理 (2) 今天计划完成的工作: 完善权限管理,进行舍员充值分明 ...

  6. JS单例模式在工作中的使用

    为了尽可能的减少全局变量的污染,在写js的时候可以采用单例模式,形式如下: 比如有一个js叫demo.js,那么我们可以在js里这样写: var demo = {} 这样做的目的是将整个js当成一个对 ...

  7. go 面试题总结

    1.什么是goroutine,他与process, thread有什么区别? 2. 什么是channel,为什么它可以做到线程安全? 3. 了解读写锁吗,原理是什么样的,为什么可以做到? 4. 如何用 ...

  8. C++中的栈内存和堆内存的区别

    数据结构中的堆与栈: 栈:是一种连续储存的数据结构,具有先进后出的性质.通常的操作有入栈(圧栈).出栈和栈顶元素.想要读取栈中的某个元素,就要将其之前的所有元素出栈才能完成.类比现实中的箱子一样. 堆 ...

  9. Redis 优势以及性能问题

      1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string, ...

  10. python selenium2 定位一组元素find_elements实例

    打开hao123首页,需要定位以上区域中的所有链接,他们有相同的父元素<ul class="js_bd site-bd site-hd0">,所有链接处在li>a ...