cropperjs是一款非常強大卻又簡單的圖片裁剪工具，它可以進行非常靈活的配置，支援手機端使用，支援包括IE9以上的現代瀏覽器。（關鍵是使用方法簡單，幾行程式碼就可以搞定）

實踐效果圖

　　如圖，可以對指定的圖片進行裁剪，可以自己選擇裁剪的互動方式，如大小、縱橫比等 還可以預覽裁剪區域，確認裁剪後可以生成一個包含裁剪圖的canvas物件，藉助canvas的toDataURL方法可以生成一張Base64格式的圖片。還有另外一種不使用canvas的方式，利用該工具豐富的api可以拿到裁剪區域相對於原圖的各項資料，使用這些資料進行css絕對定位即可展示裁剪後的圖，該方式可以保證圖片不失真和完整。

實踐關鍵程式碼

　　用vue框架做了一個小demo，使用方法非常簡單，關鍵就是要了解這個工具豐富的能力，並且知道何時使用它。

<template>
  <div class="hello">
    <p>預覽</p>
    <div class="before"></div>
    <iy-button style="margin: 30px auto;" type="error" @click="sureSava">裁剪</iy-button>
    <div class="container">
      <div class="img-container">
        <img src="../assets/test.jpg" ref="image" alt=""> 
      </div>
      <div class="afterCropper">
        <img :src="afterImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
      myCropper: null,
      afterImg: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: 'none',
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: '.before',
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false,
      })
    },
    sureSava(){
      this.afterImg = this.myCropper.getCroppedCanvas({
        imageSmoothingQuality: 'high'
      }).toDataURL('image/jpeg')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  display: flex;
}
.before{
  width: 100px;
  height: 100px;
  overflow: hidden;
  /* 這個屬性可以得到想要的效果 */
}
.img-container{
  height: 400px;
  overflow: hidden;
}
.afterCropper{
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon; 
  text-align: center;
}
.afterCropper img{
  width: 150px;
  margin-top: 30px;
}
</style>

自譯文件

官方github文件：https://github.com/fengyuanchen/cropperjs

官方文件通俗易懂，我自己按照理解簡單的翻譯了一下，懶得翻譯的可以參考一下，可能有不準確的地方，請自行判斷，尤其是對容器（container）、圖片容器（canvas）、圖片（image）、裁剪區域（crop box）這幾個概念的區分，有幾個地方可能不對，先看這張圖理解下：

下面是文件

# cropper - 裁剪圖片 - IE9+

## 使用 cropperjs
```javascript
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('被裁剪物件', '配置物件') //返回一個cropper物件

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //拿到裁剪後的base64的圖片
this.myCropper.getCropBoxData();    //獲取裁剪框資料
this.myCropper.setCropBoxData();    //設定裁剪框資料
this.myCropper.getCanvasData();      //獲取圖片資料
this.myCropper.setCanvasData();      //設定圖片資料
```
## 配置物件
> https://github.com/fengyuanchen/cropperjs
__注意：第一個值為預設值__

- viewMode 檢視控制
    - 0 無限制
    - 1 限制裁剪框不能超出圖片的範圍
    - 2 限制裁剪框不能超出圖片的範圍 且圖片填充模式為 cover 最長邊填充
    - 3 限制裁剪框不能超出圖片的範圍 且圖片填充模式為 contain 最短邊填充
- dragMode 拖拽圖片模式
    - crop 形成新的裁剪框
    - move 圖片可移動
    - none 什麼也沒有
- initialAspectRatio 裁剪框寬高比的初始值 預設與圖片寬高比相同 只有在aspectRatio沒有設定的情況下可用
- aspectRatio 設定裁剪框為固定的寬高比
- data 之前儲存的裁剪後的資料 在初始化時會自動設定 只有在autoCrop設定為true時可用
- preview 預覽 設定一個區域容器預覽裁剪後的結果
    - Element, Array (elements), NodeList or String (selector)
- responsive 在視窗尺寸調整後 進行響應式的重渲染 預設true
- restore 在視窗尺寸調整後 恢復被裁剪的區域 預設true
- checkCrossOrigin 檢查圖片是否跨域 預設true 如果是 會在被複制的圖片元素上加上屬性crossOrigin 並且在src上加上一個時間戳 避免重載入圖片時因為瀏覽器快取而載入錯誤
- checkOrientation 檢查圖片的方向資訊（僅JPEG圖片有）預設true 在旋轉圖片時會對圖片方向值做一些處理 以解決IOS裝置上的一些問題
- modal 是否顯示圖片和裁剪框之間的黑色蒙版 預設true
- guides 是否顯示裁剪框的虛線 預設true
- center 是否顯示裁剪框中間的 ‘+’ 指示器 預設true
- highlight 是否顯示裁剪框上面的白色蒙版 （很淡）預設true
- background 是否在容器內顯示網格狀的背景 預設true
- autoCrop 允許初始化時自動的裁剪圖片 配合 data 使用 預設true
- autoCropArea 設定裁剪區域佔圖片的大小 值為 0-1 預設 0.8 表示 80%的區域
- movable 是否可以移動圖片 預設true
- rotatable 是否可以旋轉圖片 預設true
- scalable 是否可以縮放圖片（可以改變長寬） 預設true
- zoomable 是否可以縮放圖片（改變焦距） 預設true
- zoomOnTouch 是否可以通過拖拽觸控縮放圖片 預設true
- zoomOnWheel 是否可以通過滑鼠滾輪縮放圖片 預設true
- wheelZoomRatio 設定滑鼠滾輪縮放的靈敏度 預設 0.1
- cropBoxMovable 是否可以拖拽裁剪框 預設true
- cropBoxResizable 是否可以改變裁剪框的尺寸 預設true
- toggleDragModeOnDblclick 是否可以通過雙擊切換拖拽圖片模式（move和crop）預設true 當拖拽圖片模式為none時不可切換 該設定必須瀏覽器支援雙擊事件
- minContainerWidth（200）、minContainerHeight（100）、minCanvasWidth（0）、minCanvasHeight（0）、minCropBoxWidth（0）、minCropBoxHeight（0） 容器、圖片、裁剪框的 最小寬高 括號內為預設值 注意 裁剪框的最小高寬是相對與頁面而言的 並非相對圖片


## 方法
__注意：如果方法沒有被設定返回任何值，那麼它會返回一個cropper的例項 因此多個方法可以使用鏈式寫法__

- crop() 手動顯示裁剪框
- reset() 重置圖片和裁剪框為初始狀態
- replace(url[, hasSameSize]) 替換圖片路徑並且重建裁剪框 
    - url 新路徑
    - hasSameSize 預設值false 設定為true表示新老圖片尺寸一樣 只需要更換路徑無需重建裁剪框
- enable() 解凍 裁剪框
- disable() 凍結 裁剪框
- destroy() 摧毀裁剪框並且移除cropper例項
- move(offsetX[, offsetY]) 移動圖片指定距離 一個引數代表橫縱向移動距離一樣
- moveTo(x[, y]) 移動圖片到一個指定的點 一個引數代表橫縱向移動距離一樣
- zoom(ratio) 縮放 ratio大於零是放大 小於零縮小
- zoomTo(ratio[, pivot]) 縮放並設定中心點的位置
- rotate(degree) 旋轉 類似css
- rotateTo(degree) 旋轉到絕對角度
- scale(scaleX[, scaleY])、scaleX(scaleX)、scaleY(scaleY) 縮放 一個引數代表橫縱向縮放值一樣
- getData([rounded]) 返回裁剪區域基於原圖片!原尺寸!的位置和尺寸 rounded預設為false 表示是否顯示四捨五入後的資料 有了這些資料可以直接在原圖上進行裁剪顯示
- setData(data) 改變裁剪區域基於原圖的位置和尺寸 僅當viewMode 不為0時有效
- getContainerData()、getImageData()、getCanvasData()、setCanvasData(data)、getCropBoxData()、setCropBoxData(data) 容器、圖片容器（畫布）、圖片、裁剪區域相對容器的資料設定和獲取
- getCroppedCanvas([options]) 得到被裁剪圖片的一個canvas物件 options設定這個canvas的一些資料
    - width、height、minWidth、minHeight、maxWidth、maxHeight、fillColor、imageSmoothingEnabled（圖片是否是光滑的 預設true）、imageSmoothingQuality（圖片的質量 預設low 還有medium、high）
- setAspectRatio(aspectRatio) 改變裁剪區域的寬高比
- setDragMode([mode]) 設定拖拽圖片模式

## 事件
- ready 渲染前（圖片已經被載入、cropper例項已經準備完畢）的準備工作事件 
- cropstart、cropmove、cropend、crop 開始畫裁剪框（或畫布）、畫裁剪框（或畫布）的中途、裁剪框（或畫布）畫完、進行裁剪事件 event.detail.originalEvent、event.detail.action
    - 當autoCrop為true crop事件會在ready之前觸發
- zoom 裁剪框縮放事件

參考資料

官方github地址：https://github.com/fengyuanchen/cropperjs

demo地址：https://gitee.com/eightFlying/cropper-demo.git