由于之前做項目的時候有需求是需要實現(xiàn)裁剪圖片來做頭像并上傳到服務器，所以上網查詢了很多資料，也試用了許多案例，發(fā)現(xiàn)cropper插件裁剪是比較完善的，所以結合之前的使用情況，編寫了此案例。本案例是參考cropper站點實例，進行修改簡化。

創(chuàng)新互聯(lián)主要從事成都做網站、成都網站設計、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務甌海,10年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

option相關參數(shù)說明：

viewMode 顯示模式

Type: Number
Default: 0
Options:
0: the crop box is just within the container 裁剪框只能在 1內移動
1: the crop box should be within the canvas 裁剪框 只能在 2圖片內移動
2: the canvas should not be within the container 2圖片 不全部鋪滿1 （即縮小時可以有一邊出現(xiàn)空隙）
3: the container should be within the canvas 2圖片 全部鋪滿1 （即 再怎么縮小也不會出現(xiàn)空隙）

dragMode 拖動模式

Default: ‘crop'
Options:
‘crop': create a new crop box 當鼠標 點擊一處時根據這個點重新生成一個 裁剪框
‘move': move the canvas 可以拖動圖片
‘none': do nothing 圖片就不能拖動了

toggleDragModeOnDblclick： 默認true .是否允許 拖動模式 “crop” 跟“move” 的切換狀態(tài)。。即當點下為crop 模式，如果未松開拖動這時就是“move”模式。放開后又為“crop”模式。

preview： 截圖的顯示位置。類型：String

responsive：是否在窗口尺寸改變的時候重置cropper。類型：Boolean，默認值true。

checkImageOrigin：類型：Boolean，默認值true。默認情況下，插件會檢測圖片的源，如果是跨域圖片，圖片元素會被添加crossOriginclass，并會為圖片的url添加一個時間戳來使getCroppedCanvas變?yōu)榭捎?。添加時間戳會使圖片重新加載，以使跨域圖片能夠使用getCroppedCanvas。在圖片上添加crossOriginclass會阻止在圖片url上添加時間戳，及圖片的重新加載。

background：類型：Boolean，默認值true。是否在容器上顯示網格背景。 要想改背景，是直接改，cropper.css樣式中的 cropper-bg。

canvas（圖片）相關

movable：類型：Boolean，默認值true。是否允許移動圖片
rotatable：類型：Boolean，默認值true。是否允許旋轉圖片。
scalable： 默認 true 。 是否允許擴展圖片。（暫時不知道干嘛用）
zoomable： 默認true, 石頭允許縮放圖片。
zoomOnWheel： 默認 true 是否允許鼠標滾軸 縮放圖片
zoomOnTouch： 默認true 是否允許觸摸縮放圖片（觸摸屏上兩手指操作。）
wheelZoomRatio： 默認0.1 師表滾軸縮放圖片比例。即滾一下。圖片縮放多少。如 0.1 就是圖片的10%

crop(裁剪框)相關

aspectRatio裁剪框比例 默認NaN
例如：: 1 / 1,//裁剪框比例 1：1
modal：類型：Boolean，默認值true。是否在剪裁框上顯示黑色的模態(tài)窗口。
cropBoxMovable:默認true ,是否允許拖動裁剪框
cropBoxResizable:默認 true,//是否允許拖動 改變裁剪框大小
autoCrop：類型：Boolean，默認值true。是否允許在初始化時自動出現(xiàn)裁剪框。
autoCropArea：類型：Number，默認值0.8（圖片的80%）。0-1之間的數(shù)值，定義自動剪裁框的大小。
highlight：類型：Boolean，默認值true。是否在剪裁框上顯示白色的模態(tài)窗口。
guides：類型：Boolean，默認值true。是否在剪裁框上顯示虛線。
center: 默認true 是否顯示裁剪框 中間的+ restore : 類型：Boolean，默認值true 是否
調整窗口大小后恢復裁剪區(qū)域。

大小相關

minContainerWidth：類型：Number，默認值200。容器的最小寬度。
minContainerHeight：類型：Number，默認值100。容器的最小高度。
minCanvasWidth：類型：Number，默認值0。canvas 的最小寬度（image wrapper）。
minCanvasHeight：類型：Number，默認值0。canvas 的最小高度（image wrapper）。

監(jiān)聽觸發(fā)的方法

build：類型：Function，默認值null。build.cropper
事件的簡寫方式。 ====== ?？丶跏蓟皥?zhí)行
built：類型：Function，默認值null。built.cropper
事件的簡寫方式。 ====== 空間初始化完成后執(zhí)行
dragstart：類型：Function，默認值null。dragstart.cropper
事件的簡寫方式。 ====== 拖動開始執(zhí)行
dragmove：類型：Function，默認值null。dragmove.cropper
事件的簡寫方式。====== 拖動移動中執(zhí)行
dragend：類型：Function，默認值null。dragend.cropper
事件的簡寫方式。====== 拖動結束執(zhí)行
zoomin：類型：Function，默認值null。zoomin.cropper
事件的簡寫方式。 ====== 縮小執(zhí)行
zoomout：類型：Function，默認值null。zoomout.cropper
事件的簡寫方式。 ====== 放大執(zhí)行

index.html代碼如下：

 
 
 
 
 
 


 
 
 

 

 

 
 

  ![](images/picture.jpg)
 
 
 

 
 

  

 
 
 
 

 

 
 

  
  
  放大
  
  
  
  
  縮小
  
  
 
 

  
  
  左移
  
  
  
  
  右移
  
  
  
  
  上移
  
  
  
  
  下移
  
  
 
 

  
  
  左轉90º
  
  
  
  
  右轉90º
  
  
 
 

  
  
  刷新
  
  
  
  
  
  上傳圖片
  
  
 
 

  
  上傳頭像
  
 
 
 

  

  

  

  
Cropped
  
   ×
  
  
  

  

  Close
  Download
  
  
  
 

 

 
 
 
 
 
 
 

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：Cropper.js實現(xiàn)裁剪圖片并上傳(PC端)-創(chuàng)新互聯(lián)
當前URL：http://weahome.cn/article/pojhh.html