相信很多朋友都在大型的網站，如新浪微博、QQ微博上看到過頭像裁圖工具，感覺很高大尚吧，今天朋友們有福了，今天就來說一說一款這麼高大尚的外掛cropper，cropper是一款使用簡單且功能強大的圖片剪裁外掛。該圖片剪裁外掛支援圖片放大縮小，支援滑鼠滾輪操作，支援圖片旋轉，支援觸控式螢幕裝置，支援canvas，並且支援跨瀏覽器使用。

jquery例項教程：圖片剪裁外掛Image Cropper使用方法

引入必要的js和css核心檔案

構建html，可以將圖片或canvas直接包裹到一個塊級元素中

初始化外掛，可以使用$.fn.cropper方法來初始化該圖片剪裁外掛。

注意事項：

注意：剪裁區域的尺寸繼承自圖片的父容器（包裹容器），所以要確保包裹圖片的是一個可見的塊級元素。

輸出的剪裁資料基於原始的圖片尺寸，你可以使用這些資料直接剪裁圖片。

如果你要使用跨源圖片來作為剪裁圖片，請確保你的瀏覽器支援HTML5 CORS settings attributes，並且你的圖片伺服器支援Access-Control-Allow-Origin屬性。

引數

• 你可以通過$().cropper(options)方法來設定引數。如果你想改變全域性預設引數，可以使用$.fn.cropper.setDefaults(options)方法。

• aspectRatio：型別：Number，預設值NaN。設定剪裁容器的比例。

• crop：型別：Function，預設值null。當改變剪裁容器或圖片時的事件函式。

• preview：型別：String(選擇器)，預設值''。新增額外的元素（容器）的預覽。注意：

• 最大寬度是剪裁容器的初始化寬度

• 最大高度是剪裁容器的初始化高度

• 如果你設定了aspectRatio引數，確保預覽容器具有相同的比例

• strict：型別：Boolean，預設值true。在strict模式中，canvas不能小於容器，剪裁容器不能再canvas之外。

• responsive：型別：Boolean，預設值true。是否在視窗尺寸改變的時候重置cropper。

• checkImageOrigin：型別：Boolean，預設值true。預設情況下，外掛會檢測圖片的源，如果是跨域圖片，圖片元素會被新增crossOrigin class，並會為圖片的url新增一個時間戳來使getCroppedCanvas變為可用。新增時間戳會使圖片重新載入，以使跨域圖片能夠使用getCroppedCanvas。在圖片上新增crossOrigin class會阻止在圖片url上新增時間戳，及圖片的重新載入。

• background：型別：Boolean，預設值true。是否在容器上顯示網格背景。

• modal：型別：Boolean，預設值true。是否在剪裁框上顯示黑色的模態視窗。

• guides：型別：Boolean，預設值true。是否在剪裁框上顯示虛線。

• highlight：型別：Boolean，預設值true。是否在剪裁框上顯示白色的模態視窗。

• autoCrop：型別：Boolean，預設值true。是否在初始化時允許自動剪裁圖片。

• autoCropArea：型別：Number，預設值0.8（圖片的80%）。0-1之間的數值，定義自動剪裁區域的大小。

• dragCrop：型別：Boolean，預設值true。是否允許移除當前的剪裁框，並通過拖動來新建一個剪裁框區域。

• movable：型別：Boolean，預設值true。是否允許移動剪裁框。

• resizable：型別：Boolean，預設值true。是否允許改變剪裁框的大小。

• zoomable：型別：Boolean，預設值true。是否允許放大縮小圖片。

• mouseWheelZoom：型別：Boolean，預設值true。是否允許通過滑鼠滾輪來縮放圖片。

• touchDragZoom：型別：Boolean，預設值true。是否允許通過觸控移動來縮放圖片。

• rotatable：型別：Boolean，預設值true。是否允許旋轉圖片。

• minContainerWidth：型別：Number，預設值200。容器的最小寬度。

• minContainerHeight：型別：Number，預設值100。容器的最小高度。

• minCanvasWidth：型別：Number，預設值0。canvas 的最小寬度（image wrapper）。

• minCanvasHeight：型別：Number，預設值0。canvas 的最小高度（image wrapper）。

• build：型別：Function，預設值null。build.cropper事件的簡寫方式。

• built：型別：Function，預設值null。built.cropper事件的簡寫方式。

• dragstart：型別：Function，預設值null。dragstart.cropper事件的簡寫方式。

• dragmove：型別：Function，預設值null。dragmove.cropper事件的簡寫方式。

• dragend：型別：Function，預設值null。dragend.cropper事件的簡寫方式。

• zoomin：型別：Function，預設值null。zoomin.cropper事件的簡寫方式。

• zoomout：型別：Function，預設值null。zoomout.cropper事件的簡寫方式。

方法

因為圖片是非同步載入的，所以你需要在built之後才能呼叫下面的方法，setAspectRatio、replace和destroy方法例外。