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>