引入和使用
<link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script>
HTML結構
<div class="demo"> <img id="demoImg" src="default.png"/> </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); } });
參數options
1.viewMode—定義cropper的視圖模式
類型:number;默認:0;可以使用0,1,2,3;
0:沒有限制,3可以移動到2外。
1 : 3只能在2內移動。
2:2圖片 不全部鋪滿1 (即縮小時可以有一邊出現空隙)
3:2圖片填充整個1
2.ragMode —-定義cropper的拖拽模式。
類型: String
默認: ‘crop’
選項:
‘crop’: 可以產生一個新的裁剪框3
‘move’: 只可以移動3
‘none’: 什么也不處理
3.aspectRatio—-裁剪框的寬高比
類型:number;默認:NAN;
在默認的時候。可以隨意改變裁剪框的大小;
4.data—如果您已經存儲了以前的數據,那么在構建時將會自動將其傳遞給setData方法。
類型:object;默認:null;
5.preview—-添加額外的元素(容器)以供預覽
類型:Element / String 默認:“ ”; 注意這里是一個dom元素。必須可以被Document.querySelectorAll獲取到; preview:".small", HTML結構:<div class="small"></div>;注意一定要設置small的寬高;最好和裁剪比例一致;還有如果要想正確的顯示出裁剪的區域需要加上樣式overflow: hidden;
6.responsive—在調整窗口大小的時候重新渲染cropper
類型:Boolean 默認:true;
7.restore—在調整窗口大小后恢復裁剪的區域。
類型:Boolean 默認:true;
8.checkCrossOrigin—-檢查當前圖像是否為跨域圖像
類型:Boolean 默認:true;
9.checkOrientation—-檢查當前圖像的Exif定向信息。
類型:Boolean 默認:true;
10.modal—顯示圖片上方的黑色模態並在裁剪框下面。
類型:Boolean 默認:true;
11.guides—顯示在裁剪框上方的虛線。
類型:Boolean 默認:true;
12.center—裁剪框在圖片正中心。
類型:Boolean 默認:true;
13.highlight–在裁剪框上方顯示白色的區域(突出裁剪框)。
類型:Boolean 默認:true;
14.background–顯示容器的網格背景。
類型:Boolean 默認:true;
15.autoCrop–當初始化時,可以自動生成圖像。
類型:Boolean 默認:true;
16.autoCropArea–定義自動裁剪面積大小(百分比)和圖片進行對比。
類型:number 默認:0.8;
就是裁剪框顯示的大小
17.movable–是否允許可以移動后面的圖片
類型:Boolean 默認:true;
18.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效果圖為:剪裁框不可以拖動。
25.cropBoxResizable—是否通過拖動來調整剪裁框的大小。
類型:Boolean 默認:true; 改成false效果圖為:剪裁框不可以調整大小。
26.toggleDragModeOnDblclick—當點擊兩次時可以在“crop”和“move”之間切換拖拽模式,
類型:Boolean 默認:true;
27.minContainerWidth—容器的最小寬度。
類型:Number 默認:200;