引入+使用
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
HTML结构
<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box">
<img id="image" src="picture.jpg">
</div>
官网上的是以下面的一段代码进行引入的
var cropper = new Cropper(image, {
aspectRatio: 16 / 9,
viewMode:1,
crop: function (e) {
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和cropper.css;就会报错(绝对的版本号的问题v1.x版本),而使用cdn方法报错就可以解除;
cdn的链接;如果使用本地的文件(v3.x版本)则写法变为
$('#image').cropper({
aspectRatio: 16 / 9,
viewMode:1,
crop: function (e) {
console.log(e);
}
});
一个简单的demo就出现了;效果图
20171213154615081.png
参数options
1.viewMode—定义cropper的视图模式
类型:number;默认:0;可以使用0,1,2,3;
20171213161043763.png
0:没有限制,3可以移动到2外。
1 : 3只能在2内移动。
2:2图片 不全部铺满1 (即缩小时可以有一边出现空隙)
3:2图片填充整个1
2.dragMode —-定义cropper的拖拽模式。
类型: String
默认: ‘crop’
选项:
‘crop’: 可以产生一个新的裁剪框3
‘move’: 只可以移动3
‘none’: 什么也不处理
3.aspectRatio—-裁剪框的宽高比
类型:number;默认:NAN;
在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9;
4.data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给setData方法
类型:object;默认:null;
5.preview—-添加额外的元素(容器)以供预览
类型:Element / String 默认:“ ”;
注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到;
preview:".small",
HTML结构:<div class="small"></div>;注意一定要设置small的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
20171213164317298.png
去掉overflow: hidden;效果图如下:
20171213164452815.png
6.responsive—在调整窗口大小的时候重新渲染cropper
类型:Boolean 默认:true;
7.restore—在调整窗口大小后恢复裁剪的区域。
类型:Boolean 默认:true;
8.checkCrossOrigin—-检查当前图像是否为跨域图像。
类型:Boolean 默认:true;
9.checkOrientation—-检查当前图像的Exif定向信息。
类型:Boolean 默认:true;
好像是移动端选择发生旋转变化的时候,触发的事件。
10.modal—显示图片上方的黑色模态并在裁剪框下面。
类型:Boolean 默认:true;
改成false效果图为:
20171213170629395.png
11.guides—显示在裁剪框上方的虚线。
类型:Boolean 默认:true;
改成false效果图为:
20171213171522726.png
12.center—裁剪框在图片正中心。
类型:Boolean 默认:true;
13.highlight–在裁剪框上方显示白色的区域(突出裁剪框)。
类型:Boolean 默认:true;
- background–显示容器的网格背景。(就是后面的马赛克)
类型:Boolean 默认:true;
- autoCrop–当初始化时,可以自动生成图像。(就是自动显示裁剪框,改成false裁剪框自动消失)
类型:Boolean 默认:true;
改成false效果图为:
20171213172910219.png
16.autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。
类型:number 默认:0.8;
就是裁剪框显示的大小
- movable–是否允许可以移动后面的图片
类型:Boolean 默认:true;
- rotatable–是否允许旋转图像。
类型:Boolean 默认:true;
19.scalable–是否允许缩放图像。
类型:Boolean 默认:true;
20.zoomable–是否允许放大图像。
类型:Boolean 默认:true;
21.zoomOnTouch–是否可以通过拖动触摸来放大图像。
类型:Boolean 默认:true;
22.zoomOnWheel–是否可以通过移动鼠标来放大图像。
类型:Boolean 默认:true;
23.wheelZoomRatio–用鼠标移动图像时,定义缩放比例。
类型:Number 默认:0.1;
24.cropBoxMovable—是否通过拖拽来移动剪裁框。
类型:Boolean 默认:true;
改成false效果图为:剪裁框不可以拖动。
- cropBoxResizable—是否通过拖动来调整剪裁框的大小。
类型:Boolean 默认:true;
改成false效果图为:剪裁框不可以调整大小。
26.toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,
类型:Boolean 默认:true;
27.minContainerWidth—容器的最小宽度。
类型:Number 默认:200;
28.minContainerHeight—容器的最小高度。
类型:Number 默认:100;
29.minCanvasWidth—canvas的最小宽度
类型:Number 默认:0;
30.minCanvasHeight—canvas的最小高度。
类型:Number 默认:0;
31.minCropBoxWidth—裁剪层的最小宽度。
类型:Number 默认:0;
32.minCropBoxHeight—裁剪层的最小高度。
类型:Number 默认:0;
33.ready—插件准备完成执行的函数(只执行一次)。
类型:Function 默认:null;
34.cropstart—剪裁框开始移动执行的函数。
类型:Function 默认:null;
35.cropmove—剪裁框移动时执行的函数。
类型:Function 默认:null;
36.cropend—剪裁框移动结束执行的函数。
类型:Function 默认:null;
37.crop—剪裁框发生变化执行的函数。
类型:Function 默认:null;
38.zoom—剪裁框缩放的时候执行的函数。
类型:Function 默认:null;
$('#image').cropper({
aspectRatio: 16 / 9,
viewMode:1,
dragMode:'none',
preview:".small",
responsive:false,
restore:false,
// modal:false,
// guides:false,
// background:false,
// autoCrop:false,
// autoCropArea:0.1,
// movable:false,
// scalable:false,
// zoomable:false,
// wheelZoomRatio:false,
// cropBoxMovable:false,
// cropBoxResizable:false,
ready:function () {
console.log("ready");
},
cropstart: function (e) {
console.log("cropstart");
},
cropmove: function (e) {
console.log("cropmove");
},
cropend: function (e) {
console.log("cropend");
},
crop: function (e) {
console.log("crop");
},
zoom: function (e) {
console.log("zoom");
},
});
20171213200938933.png
Methods 方法
使用方法示例:
$().cropper({
ready: function () {
$().cropper('method', argument1, , argument2, ..., argumentN);
}
});
1.crop() 手动显示裁剪框
$("#image").cropper({
autoCrop: false, //关闭自动显示裁剪框
ready: function () {
$(this).cropper('crop');
}
});
2.reset()—-将图像和裁剪框重置为初始状态
<button id="reset">reset</button>
//-----------------------------
$("#reset").on("click", function () {
$('#image').cropper('reset');
})
3.clear()—清除裁切框
$("#clear").on("click", function () {
$('#image').cropper('clear');
})
4.replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper
url :–类型String;—新图片的url;
onlyColorChanged (optional):–类型:Boolean默认:false;—-如果只是改变颜色,而不是大小,那么cropper只需要改变所有相关图像的src,不需要重新构建cropper。这可以用于应用过滤器。(意思是:改成true,图像的比例会发生变化自适应父盒子的大小;会失真的)
$("#replace").on("click", function () {
$('#image').cropper('replace',"./images/111.jpeg",true );
})
20171214101057326.png
20171214101113850.png
5.enable()—解锁,锁定的裁切框(与disable相对应)
$("#enable").on("click", function () {
$('#image').cropper('enable');
})
6.disable()—锁定的裁切框(裁切框不可移动)(与enable相对应)
$("#disable").on("click", function () {
$('#image').cropper('disable');
})
7.destroy()—销毁cropper并从图像中删除整个cropper。
$("#destroy").on("click", function () {
$('#image').cropper('destroy');
})
8.move(offsetX[, offsetY])—使用相对偏移量移动图像(裁切框不移动)。
offsetX–类型:Number;在水平方向上移动(px)
offsetY –类型:Number;在垂直方向上移动(px);如果不存在,其值和offsetX相同;
$("#move1").on("click", function () {
$('#image').cropper('move', 1, 0);
})
$("#move2").on("click", function () {
$('#image').cropper('move', 0, -1);
})
9.moveTo(x[, y])—-将画布(图像包装器)移动到一个绝对点
X–类型:Number;画布canvas距离left的值;
Y –类型:Number;画布canvas距离top的值;如果不存在,其值和X相同;
10.zoom(ratio)—放大图片,并使用相对比例。(裁切框不变化)
$('#image').cropper('zoom', 0.1);
$('#image').cropper('zoom', -0.1);
11.zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例
ratio:类型Number—要放大的比例
$('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)
12.rotate(degree)—旋转图像以一定的角度
degree—类型: Number
向右旋转 (degree > 0);向左旋转 (degree < 0);
$('#image').cropper('rotate', 90);
$('#image').cropper('rotate', -90);
13.rotateTo(degree)—旋转图像到固定的角度
degree—类型: Number
- scale(scaleX[, scaleY])—-翻转图像
scaleX–类型:Number;水平方向翻转;默认为 1
scaleY–类型:Number;垂直方向翻转;如果不存在,其值和scaleX相同;
$('#image').cropper('scale', -1); // 水平、垂直方向翻转
$('#image').cropper('scale', -1, 1); // 水平方向翻转
$('#image').cropper('scale', 1, -1); // 垂直方向翻转
15.scaleX(scaleX)—-缩放图像的横坐标。
类型:Number;水平方向翻转;默认为 1
16.scaleY(scaleY)—-缩放图像的纵坐标
类型:Number;垂直方向翻转;默认为 1
$('#image').cropper('scaleX', 1);
17.getData([rounded])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小
rounded 类型:Boolean 默认:false;设置true可以获取其所有数据;
返回的数据类型:Object;
- x裁切框距离左边的距离
- y裁切框距离顶部的距离
- width裁切框的宽度
- height裁切框的高度
- rotate裁切框的旋转的角度
- scaleX缩放图像的横坐标
- scaleY缩放图像的纵坐标
20171214111128948.jpg
$("#getData").on("click", function () {
console.log($('#image').cropper('getData', true));;
})
20171214111053762.png
- setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)。
data–类型:Object;
$("#setData").on("click", function () {
$('#image').cropper('setData',{width:200,height:100});
})
- getContainerData()—输出container 容器大小数据。
返回的数据类型:Object;
width当前容器的宽
height当前容器的高
20171214112220807.jpg
$("#getContainerData").on("click", function () {
console.log($('#image').cropper('getContainerData', ));;
})
20171214112042918.png
20.getImageData()—-输出图像image位置、大小和其他相关数据。
返回的数据类型:Object;
- leftimage距离左边的距离
- topimage距离顶部的距离
- widthimage的宽度
- heightimage的高度
- naturalWidth image的原始宽度
- naturalHeight image的原始高度
- aspectRatio image的纵横比
- rotateimage的旋转的角度
- scaleX缩放图像的横坐标
- scaleY缩放图像的纵坐标
$("#getImageData").on("click", function () {
console.log($('#image').cropper('getImageData', ));;
})
20171214113013804.png
21 . getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据。
返回的数据类型:Object;
- leftcanvas距离左边的距离
- topcanvas距离顶部的距离
- widthcanvas的宽度
- heightcanvas的高度
- naturalWidth canvas的原始宽度
- naturalHeight canvas的原始高度
20171214113537807.png
注意getImageData()和getCanvasData()的naturalWidth、naturalHeight的值是一样的;
22 . setCanvasData(data)—:使用数据更改画布Canvas(图像包装器)位置和大小。
返回的数据类型:Object;
- leftcanvas距离左边的距离
- topcanvas距离顶部的距离
- widthcanvas的宽度
- heightcanvas的高度
$("#setCanvasData").on("click", function () {
$('#image').cropper('setCanvasData',{width:200,height:100});
})
23 .getCropBoxData()—输出剪切框的位置和大小数据。
返回的数据类型:Object;
- left剪切框距离左边的距离
- top剪切框距离顶部的距离
- width剪切框的宽度
- height剪切框的高度
$("#getCropBoxData").on("click", function () {
console.log($('#image').cropper('getCropBoxData'));;
})
20171214123613452.png
24 . setCropBoxData(data)—–改变剪切框的位置和大小数据
data的数据类型:Object;
- left剪切框距离左边的距离
- top剪切框距离顶部的距离
- width剪切框的宽度
- height剪切框的高度
$("#setCropBoxData").on("click", function () {
$('#image').cropper('setCropBoxData',{width:200,height:100});
})
- getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁,则返回一个绘制整个im的画布
options 类型Object
- width输出Canvas的宽度
- height输出Canvas的高度
- minWidth输出Canvas的最小宽度;默认值是0
- minHeight输出Canvas的最小高度;默认值是0
- maxWidth输出Canvas的最大宽度;默认值是Infinity(无穷大)
- maxHeight输出Canvas的最大高度;默认值是Infinity(无穷大)
- fillColor在输出画布Canvas中填充任何alpha的颜色,默认值是透明的
- imageSmoothingEnabled如果图像被设置为平滑(true,默认)或不设置(false)。
- imageSmoothingQuality设置图像的质量,一个“low”(默认)、“medium”或“high”。
返回值:类型:HTMLCanvasElement画布绘制出了剪裁过的图像
注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。
如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。
为了避免获得空白的输出图像,您可能需要将maxWidth和maxHeightproperties设置为有限的数字,从而来画布元素的大小限制。
$("#getCroppedCanvas").on("click", function () {
console.log($('#image').cropper('getCroppedCanvas'));;
var cas=$('#image').cropper('getCroppedCanvas');
var base64url=cas.toDataURL('image/jpeg');
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
})
console.log(base64url); //生成base64图片的格式
$('.cavans').html(cas) //在body显示出canvas元素
})
20171214141944512.png
20171214142000975.png
$('#image').cropper('getCroppedCanvas', {
width: 160,
height: 90,
minWidth: 256,
minHeight: 256,
maxWidth: 4096,
maxHeight: 4096,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
});
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$('#image').cropper('getCroppedCanvas').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 () {
console.log('Upload error');
}
});
});
26 . setAspectRatio(aspectRatio)—改变裁切框的宽高比。
aspectRatio:类型number;是一个正数
$("#setAspectRatio").on("click", function () {
$('#image').cropper('setAspectRatio',1/1);
})
27 . setDragMode([mode])—-设置拖拽模式(就是鼠标显示的是十字还是那种带箭头的十字)
mode 类型String ;取值:none、crop、move;默认是none
Events 事件
ready—当一个cropper实例完全构建时,这个事件就会发生。
cropstart—当画布(图像包装器)或剪切框开始发生变化时,该事件就会发生。
返回的参数有event.originalEvent:;类型event;参数: mousedown, touchstart 和 pointerdown ;即触发的事件源
event.action::发生事件的行为(移动的方向)
crop:创建一个剪切框的时候
move:移动图片的时
zoom:放大缩小canvas的时候
e:调整剪切框东侧的大小
w:调整剪切框西侧的大小
s:调整剪切框南侧的大小
n:调整剪切框北侧的大小
se:东南
sw:西南
ne:东北
nw:西北
all:所有方向
$('#image').on('cropstart', function (e) {
console.log(e.type); // cropstart
console.log(e.namespace); // cropper
console.log(e.action); // ...
console.log(e.originalEvent.pageX);
// Prevent to start cropping, moving, etc if necessary
if (e.action === 'crop') {
e.preventDefault();
}
});
cropmove—当画布(图像包装器)或剪切框正在发生变化时,该事件就会发生;
返回的参数有event.originalEvent:;类型event;参数: mousemove, touchmove 和 pointermove ;即触发的事件源
event.action::发生事件的行为(移动的方向) 和 cropstart的相同
cropend—当画布(图像包装器)或剪切框正在发生变化结束时,该事件就会发生;
返回的参数有event.originalEvent:;类型event;参数: mouseup, touchend、pointerup 、pointercancel和 touchcancel ;即触发的事件源
event.action::发生事件的行为(移动的方向) 和 cropstart的相同
crop—当画布(图像包装器)或农作物盒发生改变时,该事件就会发生。
event.x
event.y
event.width
event.height
event.rotate
event.scaleX
event.scaleY
这些参数的含义去参照getData;
zoom—当一个cropper实例开始放大或缩小画布(图像包装器)时,这个事件就会发生
返回的参数有
event.originalEvent:;类型event;参数: wheel, touchmove ;即触发的事件源
event.oldRatio:类型number;当前canvas的裁切比例
event.ratio:类型number;新的canvas的裁切比例(canvasData.width / canvasData.naturalWidth)
$().on('zoom', function (e) {
// Zoom in
if (e.ratio > e.oldRatio) {
// Prevent zoom in
e.preventDefault();
}
// Zoom out
// ...
});
Npm组件地址:https://www.npmjs.com/package/virsical-cropper
引自:官网http://fengyuanchen.github.io/cropper/
文档https://github.com/fengyuanchen/cropper/blob/master/README.md –v3.x版本
网友评论