一个简单快捷的截图软件cropper.js

官网http://fengyuanchen.github.io/cropper/

需要引入的文件（此插件依赖jquery）

HTML结构

JS部分

$('#image').cropper({      aspectRatio: 1 / 1,      //此处是截取图片后的比例 可以写16 / 9 也可以1 / 1;
      crop: function(e) {        console.log(e)        // Output the result data for cropping image.
        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);
      }
});

cropper.js中的参数：1、viewMode—定义cropper的视图模式

cropper.png

0：没有限制，3可以移动到2外。 
1 : 3只能在2内移动。 
2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙） 
3：2图片填充整个1

2、dragMode —-定义cropper的拖拽模式。

类型: String 默认: ‘crop’ 
选项: 
‘crop’: 可以产生一个新的裁剪框
‘move’: 只可以移动
‘none’: 什么也不处理

3、responsive—在调整窗口大小的时候重新渲染cropper

类型：Boolean 默认：true；

4、restore—在调整窗口大小后恢复裁剪的区域。

类型：Boolean 默认：true；

5、checkCrossOrigin—-检查当前图像是否为跨域图像。

类型：Boolean 默认：true；

6、guides—显示在裁剪框上方的虚线。

类型：Boolean 默认：true；

7、highlight–在裁剪框上方显示白色的区域(突出裁剪框)。

类型：Boolean 默认：true；

8、background–显示容器的网格背景。（就是后面的马赛克）

类型：Boolean 默认：true；

9、autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。

类型：number 默认：0.8； 
就是裁剪框显示的大小

10、movable–是否允许可以移动后面的图片

类型：Boolean 默认：true；

11、scalable–是否允许缩放图像。

类型：Boolean 默认：true；

12、cropBoxMovable—是否通过拖拽来移动剪裁框。

类型：Boolean 默认：true；
改成false效果图为：剪裁框不可以拖动。

13、cropBoxResizable—是否通过拖动来调整剪裁框的大小。

类型：Boolean 默认：true； 
改成false效果图为：剪裁框不可以调整大小。

本文来源于：https://blog.csdn.net/weixin_38023551/article/details/78792400

作者：Brighten_Sun
链接：https://www.jianshu.com/p/d30dd6217c39