引入和使用
<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；