cropper.js的使用 / 裁剪插件 / 获得移动旋转裁剪的数据

在项目中遇到图片剪裁功能的实现，如果是简单的图片的上传编辑剪裁然后显示（比如上传头像），上传的图片比较少或者比较小，用photoclip.js非常方便，剪裁直接在前端就可以实现无需用到后台，而且剪裁之后的图片清晰度也足够显示了，但是如果是对图片的剪裁之后的像素要求比较高的（比如剪裁之后的图片可打印，dpi在300之上），或者是主要功能就是图片编辑处理（图片的打印）希望图片可以重复编辑的，需要处理的图片比较多且比较大，那么前端实现图片的剪裁难以实现精度的要求，就需要借助后台来实现图片的剪裁功能，前台把需要剪裁的数据传递给后台即可，用cropper.js剪裁插件可以满足这个需求。

学习cropper.js:cropper.js文档翻译

主要的用法和属性如下：

$("#image").cropper({
          aspectRatio: 16 / 9,//裁剪框的宽高比
          viewMode:1,//定义cropper的视图模式
          dragMode:"move",//定义cropper的拖拽模式‘crop’: 可以产生一个新的裁剪框 ‘move’: 只可以移动裁剪框 ‘none’: 什么也不处理
          preview:".yulan",//添加额外的元素(容器)以供预览
          modal:true,//显示图片上方的黑色遮盖层
          guides:false,//显示在裁剪框上方的虚线
          background:false,//显示容器的网格背景。（就是后面的马赛克）
          autoCrop: true, //是否自动显示裁剪框 默认：true
          autoCropArea:"0.6",//定义自动裁剪面积大小和图片进行对比 默认：0.8；
          movable:true,//是否允许可以移动后面的图片 默认：true
          rotatable:true,//是否允许旋转图像 默认：true
          scalable:true,//是否允许缩放图像 默认：true
          zoomable:true,//是否允许放大图像 默认：true
          zoomOnTouch:true,//是否可以通过拖动触摸来放大图像 默认：true
          zoomOnWheel:true,//是否可以通过移动鼠标来放大图像 默认：true
          wheelZoomRatio:"0.1",//用鼠标移动图像时，定义缩放比例
          cropBoxMovable:false,//是否通过拖拽来移动剪裁框 默认：true 
          cropBoxResizable:false,//是否通过拖动来调整剪裁框的大小 默认：true
          toggleDragModeOnDblclick:true,//当点击两次时可以在“crop”和“move”之间切换拖拽模式 默认：true
          responsive:true,//在调整窗口大小的时候重新渲染cropper 默认：true
          restore:true,//在调整窗口大小后恢复裁剪的区域 默认：true
          minContainerWidth:"200",//容器的最小宽度 默认：200；
          minContainerHeight:"100",//容器的最小高度 默认：100；
          minCanvasWidth:"0",//canvas的最小宽度 默认：0
          minCanvasHeight:"0",//canvas的最小高度 默认：0
          minCropBoxWidth:"0",//裁剪层的最小宽度 默认：0
          minCropBoxHeight:"0",//裁剪层的最小高度 默认：0
      
    });

方法有：

crop() 手动显示裁剪框
reset()—-将图像和裁剪框重置为初始状态
clear()—清除裁切框
replace(url)—替换图像的src并重新构建cropper
enable()—解锁，锁定的裁切框（与disable相对应）
disable()—锁定的裁切框（裁切框不可移动）（与enable相对应）
destroy()—销毁cropper并从图像中删除整个cropper。
move(offsetX[, offsetY])—使用相对偏移量移动图像(裁切框不移动)。
moveTo(x[, y])—-将画布(图像包装器)移动到一个绝对点
zoom(ratio)—放大图片，并使用相对比例。（裁切框不变化）
zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例
rotate(degree)—旋转图像以一定的角度
rotateTo(degree)—旋转图像到固定的角度
scale(scaleX[, scaleY])—-翻转图像
scaleX(scaleX)—-缩放图像的横坐标
scaleY(scaleY)—-缩放图像的纵坐标
getData([rounded])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小）
setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)
getContainerData()—输出container 容器大小数据
getImageData()—-输出图像image位置、大小和其他相关数据
getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据
setCanvasData(data)—：使用数据更改画布Canvas(图像包装器)位置和大小
getCropBoxData()—输出剪切框的位置和大小数据
setCropBoxData(data)—–改变剪切框的位置和大小数据
getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁，则返回一个绘制整个画布
setAspectRatio(aspectRatio)—改变裁切框的宽高比
setDragMode([mode])—-设置拖拽模式（就是鼠标显示的是十字还是那种带箭头的十字

replace会重构cropper,这时再进行其他的属性设置会不起作用，如果只是想换图片，而不重置cropper，也就是之前的属性设置都起作用的话，不能使用replace，需要把img标签的父元素设置内容清空，然后再启动cropper时，重新创建img。原理就是启用多个cropper。想换图片---只简单的换图片的src是不起作用的。

事件：

ready cropstart cropmove cropend crop zoom  

注：如果出现报错可能是cropper.js版本的问题

我要实现的是移动端图片的剪裁，因此需要剪裁框不可移动（默认可以移动），后面的图片可以移动（默认可以移动），用到的属性是：

cropBoxMovable:false,//是否通过拖拽来移动剪裁框 默认：true 

下面是一个小demo：

	
	
	
	



  


旋转
确认剪裁-获得剪裁数据

运行之后，点击旋转，点击确认剪裁按钮：

这里获得的剪裁数据都是相对于图片的原始数据来说的，与剪裁框的css的大小无关，与图片显示在剪裁区域的面积有关。原始图片就按照这个数据先进行顺时针旋转90deg，然后在距离图片（旋转之后的图片 ）的左上角（0，0）的（233，0）处开始剪裁，剪裁宽度699px，剪裁高度1242px。

相关文档：

图片裁剪(cropper)后上传问题