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;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM