vue-cropper筆記

安裝插件：
npm install vue-cropper --save-dev
引用：
import vueCropper from 'vue-cropper'
聲明：
components: {
  vueCropper
}

<vueCropper
  ref="cropper"
  :img="option.img"     // 裁剪圖片的地址	可選值：url 地址 || base64 || blob
  :outputSize="option.size"    // 裁剪生成圖片的質量    可選值：0.1 - 1
  :outputType="option.outputType"    // 裁剪生成圖片的格式    可選值：jpeg || png || webp
  :info="true"	    // 裁剪框的大小信息	可選值：true || false
  :canScale="true"    // 圖片是否允許滾輪縮放     可選值：true || false
  :full="option.full"	// 是否輸出原圖比例的截圖  可選值：true | false
  :canMove="option.canMove"	// 上傳圖片是否可以移動 可選值：true | false
  :canMoveBox="option.canMoveBox"    // 截圖框能否拖動	可選值：true | false
  :fixedBox="option.fixedBox"	// 固定截圖框大小 不允許改變  可選值：true | false
  :original="option.original"	// 上傳圖片按照原始比例渲染  可選值：true | false
  :fixedBox: false, // 圖片是否固定
  :fixed: true, // 截圖框是否固定
  :fixedNumber: [1, 1],//截圖框的高寬比例
  @realTime="realTime"	    // 預覽
></vueCropper>

this.$refs.cropper.startCrop() 開始截圖
this.$refs.cropper.stopCrop() 停止截圖
this.$refs.cropper.clearCrop() 清除截圖
this.$refs.cropper.changeScale() 修改圖片大小 正數爲變大 負數變小
this.$refs.cropper.getImgAxis() 獲取圖片基於容器的座標點
this.$refs.cropper.getCropAxis() 獲取截圖框基於容器的座標點
this.$refs.cropper.goAutoCrop 自動生成截圖框函數
this.$refs.cropper.rotateRight() 向右邊旋轉90度
this.$refs.cropper.rotateLeft() 向左邊旋轉90度

獲取截圖信息
this.$refs.cropper.cropW 截圖框寬度
this.$refs.cropper.cropH 截圖框高度
 
 
 
獲取截圖數據
// 獲取截圖的base64 數據
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})
 
// 獲取截圖的blob數據
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})
 
 
 
// 圖片預覽
realTime (data) {
  this.previews = data
}
 
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>