自己仿照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. eg_7

    1. 给定Map,根据Map中的值从大到小排列 package com.studentmanager.www; import java.util.ArrayList; import java.util ...

  2. Beta冲刺 (7/7)

    队名:天机组 组员1友林 228(组长) 今日完成:封装代码 明天计划: 剩余任务:优化网络通讯机制 主要困难:暂无 收获及疑问:暂无 组员2方宜 225 今日完成:优化了一部分活动 明天计划:剩余活 ...

  3. Gradle入门（1）：安装

    在Ubuntu下,执行以下命令: sudo apt-get install gradle 安装完成后,执行命令: gradle -v 得到以下信息: Picked up _JAVA_OPTIONS:  ...

  4. SQL语句中的output用法

    private void button2_Click(object sender, RoutedEventArgs e) { using (SqlConnection conn = new SqlCo ...

  5. sitemesh入门

    今天在公司用到了sitemesh这个框架. 网上的资料已经有很多了.  在此就不做具体介绍了, 仅仅做个笔记. sitemesh是一种模板框架,是为了解决页面重复代码而设计的. 设计思想 siteme ...

  6. rpm安装和二进制安装

    rpm包安装 Tomcat RPM安装(先安装JDK + 再安装Tomcat) 1:升级系统自带的JDK(也可以使用oracle的JDK) yum install -y java-1.8.0-open ...

  7. springmvc上传文件报错org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.springframework.web.multipart.MultipartFile]

    在用springmvc+mybatis进行项目开发时,上传文件抛异常... org.springframework.beans.BeanInstantiationException: Could no ...

  8. Java线程池（一）：初识

    1.什么是线程池? 简单粗暴的理解就是:装着一个或多个线程的容器,我们称这个容器为线程池. 在现实世界中,有着各种各样的“池”,例如游泳池.花池等等.那花池来说,里面种满了各种各样的鲜花,花池本身要做 ...

  9. Visual Studio Code运行Python文件出现 “Linter pylint is not installed ”提示解决办法

    运行Python代码后出现 “Linter pylint is not installed ”提示 只需要添加一行代码就可以解决 { "python.pythonPath": &q ...

  10. C++解析命令行参数（仿C语言args）

    说好不造轮子的,就管不住这手 #include <cstdio> #include <string> #include <vector> bool ParseCha ...