在项目中遇到图片剪裁功能的实现，如果是简单的图片的上传编辑剪裁然后显示（比如上传头像），上传的图片比较少或者比较小，用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：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cropper2</title>
<link rel="stylesheet" type="text/css" href="tools/cropper-master/dist/cropper.css">
<style type="text/css">
.box{
width: 200px;
height: 400px;
float: left;
}
img {
max-width: 100%;
}
.yulan{
border: 1px solid black;
width: 200px;
height:400px;
overflow: hidden;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="box">
<img id="image" src="img/1.34M.png">
</div>
<div class="yulan"></div>
<button class="xz">旋转</button>
<button class="qrjc">确认剪裁-获得剪裁数据</button>
</body>
<script type="text/javascript" src="tools/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="tools/cropper-master/dist/cropper.js"></script>
<script type="text/javascript">
$(function(){
$("#image").cropper({
viewMode:1,//定义cropper的视图模式
dragMode:"move",//定义cropper的拖拽模式‘crop’: 可以产生一个新的裁剪框 ‘move’: 只可以移动裁剪框 ‘none’: 什么也不处理
preview:".yulan",//添加额外的元素(容器)以供预览
guides:false,//显示在裁剪框上方的虚线
background:true,//显示容器的网格背景。（就是后面的马赛克）
autoCropArea:"0.6",//定义自动裁剪面积大小和图片进行对比 默认：0.8；
scalable:false,//是否允许缩放图像 默认：true
zoomable:false,//是否允许放大图像 默认：true
wheelZoomRatio:"0.1",//用鼠标移动图像时，定义缩放比例
cropBoxMovable:false,//是否通过拖拽来移动剪裁框 默认：true 重点
cropBoxResizable:false,//是否通过拖动来调整剪裁框的大小 默认：true
toggleDragModeOnDblclick:false,//当点击两次时可以在“crop”和“move”之间切换拖拽模式 默认：true
});
$(".xz").click(function(){
$("#image").cropper("rotate",90);
})
$(".qrjc").click(function(){
console.log("确认剪裁-获得剪裁数据")
console.log($('#image').cropper('getData', true));
// 返回的数据类型：Object；
// - x裁切框距离左边的距离
// - y裁切框距离顶部的距离
// - width裁切框的宽度
// - height裁切框的高度
// - rotate裁切框的旋转的角度
// - scaleX缩放图像的横坐标
// - scaleY缩放图像的纵坐标
// 输出最终裁剪的区域位置和大小数据都是根据图片的原始大小获得的
})
})
</script>
</html>
运行之后，点击旋转，点击确认剪裁按钮：
这里获得的剪裁数据都是相对于图片的原始数据来说的，与剪裁框的css的大小无关，与图片显示在剪裁区域的面积有关。原始图片就按照这个数据先进行顺时针旋转90deg，然后在距离图片（旋转之后的图片 ）的左上角（0，0）的（233，0）处开始剪裁，剪裁宽度699px，剪裁高度1242px。
相关文档：
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
