cropper.js頭像剪裁

引入和使用

<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；