自己仿照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. 【流程图】购物车、三级菜单、sed替换

  2. SpringMVC运行原理浅析

    SpringMVC是主流的J2EEWEB层框架,SpringMVC是Sping家族中一个重要的产品.下面给出SpringMVC的运行原理.springmvc和spring无需通过中间层进行整合,spr ...

  3. [并查集] 1107. Social Clusters (30）

    1107. Social Clusters (30) When register on a social network, you are always asked to specify your h ...

  4. 由RS-232串口到PROFIBUS-DP总线的转换接口设计

    转自:http://gongkong.ofweek.com/2013-08/ART-310007-11001-28716256_2.html 1.PROFIBUS-DP网络协议 PROFIBUS的网络 ...

  5. charles抓取移动端app数据

    pc端为mac 移动端为android pc端 1.下载charles并安装 安利一个超好的良心网站(好多好用的软件都可以在上面找到,并且免费): http://xclient.info/search ...

  6. cropper.js 超级好用的裁剪图片工具

    最近要做一个照片裁剪功能.就选用了cropper.js 代码如下:贴出来 <div class="container"> <div class="row ...

  7. excel表格如何限制单元格输入内容

    一天一天实在太快,周六了~~~ 测试任务不太紧的时候就可以着手开始整理本月的测试项目,选择的是excel,清晰明了. 原来excel的功能远比我们想象的强大与好用,今天先介绍如何限制单元格内容: 如下 ...

  8. nginx负载均衡和tomcat热部署简单了解

    简单说下几个名词 nginx     它是一个反向代理,实际上就是一台负责转发的代理服务器,貌似充当了真正服务器的功能,但实际上并不是,代理服务器只是充当了转发的作用,并且从真正的服务器那里取得返回的 ...

  9. Redis&PHP的使用安装-windows版

    Redis是一个Key-value的数据结构存储系统,可以以数据库的形式,缓存系统,消息处理器使用,它支持的存储value类型很多,例如,string.list(链表).set(集合).zset(so ...

  10. [转帖]Cgroups 与 Systemd

    Cgroups 与 Systemd 大神的文章很牛B .. https://www.cnblogs.com/sparkdev/p/9523194.html 看不太懂 , 转帖一下 自己留着好好看呢. ...