官方文档
安装
npm install cropperjs
语法
new Cropper(element[, options])
// element:元素,HTMLImageElement 或 HTMLCanvasElement
// options:配置项,可选
官方例子
html
<!-- Wrap the image or canvas element with a block element (container) -->
<div>
<img id="image" src="picture.jpg" />
</div>
css
/* Ensure the size of the image fit the container perfectly */
img {
display: block;
/* This rule is very important, please don't ignore this */
max-width: 100%;
}
js
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
const image = document.getElementById('image')
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x)
console.log(event.detail.y)
console.log(event.detail.width)
console.log(event.detail.height)
console.log(event.detail.rotate)
console.log(event.detail.scaleX)
console.log(event.detail.scaleY)
},
})
注意:要导入样式,不然不会生效,像下面这样
参数 options
- viewMode—定义 cropper 的视图模式
类型:number;默认:0;可以使用 0,1,2,3;
0:没有限制,3 可以移动到 2 外。 1 : 3 只能在 2 内移动。 2:2 图片 不全部铺满 1 (即缩小时可以有一边出现空隙) 3:2 图片填充整个 1
- dragMode —-定义 cropper 的拖拽模式。
类型: String 默认: ‘crop’ 选项: ‘crop’: 可以产生一个新的裁剪框 3 ‘move’: 只可以移动 3 ‘none’: 什么也不处理
- aspectRatio—-裁剪框的宽高比
类型:number;默认:NAN; 在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9; 值为 1 时,正方形
- data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给 setData 方法。(具体怎么用还不知道)
类型:object;默认:null;
- preview—-添加额外的元素(容器)以供预览
类型:Element / String 默认:“ ”; 这里是一个 dom 元素。必须可以被 Document.querySelectorAll 获取到; preview:“.small”, HTML 结构:
<div class="image-view"></div>
.image-view { width: 190px; height: 160px; /* overflow 很重要 */ overflow: hidden; }
注意一定要设置 image-view 的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden;
- responsive—在调整窗口大小的时候重新渲染 cropper
类型:Boolean 默认:true;
- restore—在调整窗口大小后恢复裁剪的区域。
类型:Boolean 默认:true;
- checkCrossOrigin—-检查当前图像是否为跨域图像。
类型:Boolean 默认:true;
- checkOrientation—-检查当前图像的 Exif 定向信息。
类型:Boolean 默认:true;
- modal—显示图片上方的黑色模态并在裁剪框下面。
类型:Boolean 默认:true;
- guides—显示在裁剪框上方的虚线。
类型:Boolean 默认:true;
- center—裁剪框在图片正中心。
类型:Boolean 默认:true;
- highlight–在裁剪框上方显示白色的区域(突出裁剪框)。
类型:Boolean 默认:true;
- background–显示容器的网格背景。(就是后面的马赛克)
类型:Boolean 默认:true;
- autoCrop–初始化时,自动显示裁剪框
类型:Boolean 默认:true;
- autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。
类型:number 默认:0.8; 取值范围:0 ~ 1
- movable–是否允许可以移动后面的图片
类型:Boolean 默认:true;
- rotatable–是否允许旋转图像。
类型:Boolean 默认:true;
- rotatable–是否允许旋转图像。
类型:Boolean 默认:true;
- zoomable–是否允许放大图像。
类型:Boolean 默认:true;
- zoomOnTouch–是否可以通过拖动触摸来放大图像。
类型:Boolean 默认:true;
- zoomOnWheel–是否可以通过移动鼠标来放大图像。
类型:Boolean 默认:true;
- wheelZoomRatio–用鼠标移动图像时,定义缩放比例。
类型:Number 默认:0.1;
- cropBoxMovable—是否通过拖拽来移动剪裁框。
类型:Boolean 默认:true;
- cropBoxResizable—是否通过拖动来调整剪裁框的大小。
类型:Boolean 默认:true;
- toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,
类型:Boolean 默认:true;
- minContainerWidth—容器的最小宽度。
类型:Number 默认:200;
- minContainerHeight—容器的最小高度。
类型:Number 默认:100;
- minCanvasWidth—canvas 的最小宽度。
类型:Number 默认:0;
- minCanvasHeight—canvas 的最小高度。
类型:Number 默认:0;
- minCropBoxWidth—裁剪层的最小宽度。
类型:Number 默认:0;
- minCropBoxHeight—裁剪层的最小高度。
类型:Number 默认:0;
- ready—插件准备完成执行的函数(只执行一次)。
类型:Function 默认:null;
- cropstart—剪裁框开始移动执行的函数。
类型:Function 默认:null;
- cropmove—剪裁框移动时执行的函数。
类型:Function 默认:null;
- cropend—剪裁框移动结束执行的函数。
类型:Function 默认:null;
- crop—剪裁框发生变化执行的函数。
类型:Function 默认:null;
- zoom—剪裁框缩放的时候执行的函数。
类型:Function 默认:null;