cropper插件的使用参考
链接：https://pan.baidu.com/s/1KL7d4T_kj8JQ26wBj8QhLA
提取码：j9hi
cropper介绍
兼容所有支持了Canvas的浏览器（IE9+），一小部分功能例外，对移动端操作也有适配，支持裁剪、旋转、翻转等，具体请查看官方文档。
但是它并没有对图片真正的处理，只是记录了用户做了哪些变换，然后需要自己再去处理
cropper使用
一、使用前准备：
引入源文件
二、option参数：var options = { '参数1': '值1', '参数2': '值2'}; $("#photo").cropper(options); 不完整，想了解全部参数可查看官方API文档
viewMode：0(默认) [1 / 2 / 3] 对需裁剪图片缩放&移动的限制。其中：0（没有限制）、1（图片缩放时最小不能小于裁剪框，可任意移动）、2（图片缩放时最小不能小于它的外容器，图片移动时上下或左右必须贴着外容器）、3（图片缩放时最小不能小于它的外容器，图片移动时上下左右都必须贴着外容器）
dragMode: 'crop'(默认) ['move' / 'none'] 其中：crop（当鼠标点击裁剪框外的一处时根据这个点重新生成一个 裁剪框）、move（可以拖动图片）、none（什么也不做）
aspectRatio: 宽 / 高 值为裁剪框的宽高比（默认NaN）
preview: str 值为显示预览图的容器选择器，如 div.box
responsive: true [false] 是否响应式，在调整窗口大小时重新渲染裁剪器
modal: true [false] 是否显示裁剪框外的黑色半透明背景
cropBoxMovable: true [false] 是否允许拖动改变裁剪框大小，默认true
guides: true [false] 是否显示裁剪框上的虚线
center:true [false] 是否显示裁剪框上的中心指示器
highlight: true [false] 是否高亮显示裁剪框中的图像
movable: true [false] 是否允许移动图像
rotatable: true [false] 是否允许旋转图像
scalable: true [false] 是否允许缩放图像
事件相关
ready：初始化完成，只调用一次
cropstart：移动（裁剪框或图片）开始
cropmove：移动（裁剪框或图片）
cropend：移动（裁剪框或图片）结束
crop：当画布或裁剪框改变时
zoom：图片缩放事件
三、Methods方法（如需要将裁剪后的图像上传给服务器，请仔细看下面的getCroppedCanvas方法）
由于cropper是异步加载的，所以除 setAspectRatio 和 destroy 之外的事件都应该放在ready事件参数中（下面的方法列表说明都是放在ready内的，重复的代码就不再写了）：
$("#photo").cropper({
ready: function () {
$(this).cropper('method', argument1, , argument2, ..., argumentN);
}
});
crop()：手动显示裁剪框
autoCrop: false,
ready: function () {
$(this).cropper('crop');
}
reset()：将图像和裁剪框重置为初始状态
clear()：清除裁剪框
replace(url[, onlyColorChanged])：替换图像的 url 并重建cropper
url：新的图片url地址
onlyColorChanged ：默认值为false，如果只改变颜色，而不改变大小，那么cropper只需要改变所有相关图像的src，而不需要重建cropper。这可以用于filters应用
disable()：冻结（禁用）cropper
enable()：解冻 cropper
destroy()：销毁cropper，并从图像中删除实例
move(offsetX[, offsetY])：值为number类型，分别表示水平/垂直 方向的移动尺寸（px值，offsetY默认值同offsetX）。$(this).cropper('move', 1, -1);
moveTo(x[, y])：将画布（图像的容器）移动到绝对点。值为number类型，x, y分别表示画布的 left / top 值（y默认值同x）
zoom(ratio)：以相对比例缩放画布（图像的容器）。值为number类型，ratio>0时放大，ratio<0时缩小。$(this).cropper('zoom', -0.1);
zoomTo(ratio)：缩放画布（图像的容器）到绝对比率。值为number类型
rotate(degree)：以相对角度旋转图像。值为number类型，正数向右旋转，负数向左旋转。$(this).cropper('rotate', 90);
rotateTo(degree)：旋转图像到绝对角度
scale(scaleX[, scaleY])：缩放图像。值为number类型，参数分别表示图像在横 / 纵坐标上的缩放（scaleX默认值为1、scaleY默认值同scaleX）。$(this).cropper('scale', -1, 1);
scaleX(scaleX)：图像在横坐标上的缩放。值为number类型（默认值为1）
scaleY(scaleY)：图像在纵坐标上的缩放。值为number类型（默认值为1）
getData([rounded])：默认值为false，设置true可获得舍入值。var getData = $image.cropper("getData");。有object类型的记录用户操作的返回值，可将此返回值发送给服务器端以直接输出图像。其中：
x：裁剪框左边的偏移量
y：裁剪框顶部的偏移量
width：裁剪框的宽
height：裁剪框的高
rotate：图像旋转角度
scaleX：图像在横坐标上的缩放
scaleY：图像在纵坐标上的缩放
setData(data)：用新数据（基于原始图像）改变裁剪框的位置和大小（注意：此方法仅在 viewmode 选项大于或等于1时可用）。data参数为与getData()返回值相同的Object对象，如：$(this).cropper("setData", { x: 203, y: 491, width: 393, height: 393, rotate: 90, scaleX: 2, scaleY: 2 });
getContainerData()：返回容器大小数据，object类型，参数为：包含容器的当前宽 / 高度
getImageData()：返回object类型的图像的位置、大小等相关数据：{ left: 0, top: 0, width: 700, height: 393.75, naturalWidth: 1280, naturalHeight: 720, aspectRatio: 1.7, rotate: 0, scaleX: 1, scaleY: 1 }。参数为：图像的左偏移量、图像的上偏移量、图像的宽、图像的高、图像的自然宽度、图像的自然高度、图像的纵横比、图像的旋转角度、图像在横坐标上的缩放、图像在纵坐标上的缩放
getCanvasData()：返回object类型的画布（图像的容器）的位置和大小数据：{ left: 115.7, top: -241.4, width: 476.4, height: 847.0, naturalWidth: 720, naturalHeight: 1280 }。参数为：图像的左偏移量、图像的上偏移量、图像的宽、图像的高、图像的自然宽度、图像的自然高度
setCanvasData(data)：用新数据更改画布（图像包装器）的位置和大小。data参数为Object类型：{ left: 画布左边的新偏移量, top: 画布上边的新偏移量, width: 画布的新宽度, height: 画布的新高度 }
getCropBoxData()：输出object类型的裁剪框的位置和大小数据：{ left: 裁剪框左侧的偏移量, top: 裁剪框上边的偏移量, width: 裁剪框的宽度, height: 裁剪框的高度 }
setCropBoxData(data)：用新数据更改裁剪框的位置和大小。data参数为Object类型：{ left: 裁剪框左边的新偏移量, top: 裁剪框上边的新偏移量, width: 裁剪框的新宽度, height: 裁剪框的新高度 }
getCroppedCanvas([options])：
options对象参数：width（输出画布的指定宽度）、height（输出画布的指定高度）、minWidth（输出画布的最小目标宽度，默认值为0）、minHeight（输出画布的最小目标高度，默认值为0）、maxWidth（输出画布的最大目标宽度，默认值为0）、maxHeight（输出画布的最大目标高度，默认值为0）、fillColor（用于填充输出画布中任何alpha值的颜色，默认值是透明的）、imageSmoothingEnabled（设置图像是否平滑，默认true）、imageSmoothingQuality（设置图像平滑的质量，low（默认） / high）
返回值：画出剪裁图像的画布（一个canvas DOM）
注意：1)输出画布的长宽比将自动拟合到裁剪框的长宽比（可以理解为把裁剪框内的图像拉伸为options中指定的宽高）；2) 如果希望从输出画布中获取JPEG图像，应该首先设置fillColor选项，否则JPEG图像中的透明部分将默认为黑色；
重要：可以用此返回值调用（如果浏览器支持这些API）：1) HTMLCanvasElement .toDataURL 获取base64格式的数据、2) HTMLCanvasElement .toBlob 获取blob，直接将画布显示为图像，且可使用FormData将其上传到服务器
//var base64 = $(this).cropper('getCroppedCanvas',{ width:750, height:582 }).toDataURL('image/png');
//$target.attr('src', base64);
$(this).cropper('getCroppedCanvas', {
width: 160,
height: 90,
fillColor: '#fff'
}).toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
$.ajax('/path/to/upload', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {...}
});
});;
setAspectRatio(aspectRatio)：改变裁剪框的长宽比，参数为一个正数
setDragMode([mode])：改变拖曳模式。可以通过双击裁剪框来切换crop和move。mode可选：’none’ / ‘crop’ / ‘move’，默认none
网友评论