vue專案中藉助vue-cropper做圖片裁剪

vue專案中怎麼做圖片裁切？以下這篇文章跟大家介紹怎麼使用vue-cropper做圖片裁剪，希望給大家有幫助！

因為專案需要，需要做圖片裁剪。先前的專案已經由cropper.js實作過，因為這次使用的是vue，所以採用了vue-cropper這個元件，使用起來很簡單，但坑也很多。 （學習影片分享：vue影片教學）

一、安裝

#

npm install vue-cropper

##main.js

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

二、圖片裁切

1、引入VueCropper元件，並設定相關的屬性。

<div    style="max-width:90%">
            <vueCropper
              @mouseenter.native="enter"
              @mouseleave.native="leave"
              ref="cropper"
              :img="uploadImg"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
              style="background-image:none"
            ></vueCropper>
</div>

option: {
       info: true, // 裁剪框的大小信息
       outputSize: 0.8, // 裁剪生成图片的质量
       outputType: "jpeg", // 裁剪生成图片的格式
       canScale: false, // 图片是否允许滚轮缩放
       autoCrop: false, // 是否默认生成截图框
       fixedBox: false, // 固定截图框大小 不允许改变
       fixed: false, // 是否开启截图框宽高固定比例
       fixedNumber: [7, 5], // 截图框的宽高比例
       full: true, // 是否输出原图比例的截图
       canMove: false, //时候可以移动原图
       canMoveBox: true, // 截图框能否拖动
       original: false, // 上传图片按照原始比例渲染
       centerBox: false, // 截图框是否被限制在图片里面
       infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
     }

❗️預設的裁剪圖片的背景帶有賊醜的馬賽克，其實是它用了一張馬賽克的圖片做背景，去掉只需在VueCropper上設置去除背景圖片的樣式

style ="background-image:none".

2、上傳完成後滑鼠進入VueCropper即可以開始裁切

在VueCroper上設定

@mouseenter.native="enter "事件(⭐️元件上使用原生事件需要加上native關鍵字)

enter() {
 if (this.uploadImg == "") {
   return;
 }
 this.$refs.cropper.startCrop(); //开始裁剪
},

3、離開VueCropper即停止裁剪，得到裁剪圖片。

在VueCroper上設定

@mouseleave.native="leave"事件

leave() {
   this.$refs.cropper.stopCrop();//停止裁剪
   this.$refs.cropper.getCropData(data => { //获取截图的base64格式数据
     this.cutImg = data;
   });
   // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
   //   this.cutImg = data;
   // });
 },

我這裡是離開p就會裁剪，點擊裁剪按鈕後傳遞裁剪圖片，而不是點擊裁剪按鈕才裁剪，因為我點擊裁剪按鈕裁剪的話，拿到的圖片並沒有裁剪過，我也不知道為什麼，就想出了這個辦法。

vue-cropper圖片裁切問題

三、將截圖框回顯到原圖上

基本原理:

this.$refs.cropper.getCropAxis() //获取截图框基于容器的坐标点 {x1: 174, x2: 131, y1: 86, y2: 58}
this.$refs.cropper.cropW  //截图框宽
this.$refs.cropper.cropH //截图框高

透過上面的方式取得截圖框的寬、高和基於容器的座標點,然後讓VueCropper的自動截取框顯示出來並設定自動截取框的大小和位置。

以姓名欄位為例:

{
          id: 1,
          name: "姓名",
          cropInfo: {
            width: 108, //this.$refs.cropper.cropW
            height: 56, //this.$refs.cropper.cropH 
            offsetX: 174, //this.$refs.cropper.getCropAxis().x1
            offsetY: 86  //this.$refs.cropper.getCropAxis().y1
}

1、在"姓名"el-card上設定enter事件

enterCard(refWord) {
      this.$refs.cropper.goAutoCrop();//重新生成自动裁剪框
      this.$nextTick(() => {
        // if cropped and has position message, update crop box
        //设置自动裁剪框的宽高和位置
        this.$refs.cropper.cropOffsertX = refWord.cropInfo.offsetX;
        this.$refs.cropper.cropOffsertY = refWord.cropInfo.offsetY;
        this.$refs.cropper.cropW = refWord.cropInfo.width;
        this.$refs.cropper.cropH = refWord.cropInfo.height;
      });
    }

2、在所有el-card外層的el-tabs上設定leave事件

leaveCard() {
      this.$refs.cropper.clearCrop(); //取消裁剪框
    }

❗️注意不要在el-card上設定leave事件，不然進行滑鼠移動到下一個el-card的時候會取消裁剪框又重新生成，導致頁面出現閃爍的現象。

四、其它

• 將截圖框限制在圖片內:https://github.com/xyxiao001/vue-cropper/issues /429

  解決方案:centerBox設定為true，並且只有autoCrop=true時才會生效
  

• 專案需要將裁剪框框出的位置資訊和裁剪框大小給後台，讓後台裁剪或進行OCR，但傳給後台後裁剪出來的圖片總是向右下角偏移:https://github.com/xyxiao001/vue-cropper/issues/386

  解決方案:圖片是縮放過的，傳遞position時，需要將position*scale.
  

• 裁剪大部分圖片沒有問題，但是裁剪某些圖片時總是有偏差:https://github.com /xyxiao001/vue-cropper/issues/439

  解決方法: 原來預設的裁切圖片大小有限制，寬高最高為2000px，將這個值設定為了10000，問題解決.
  

【相關影片教學推薦：

vuejs入門教學、web前端入門】

以上是vue專案中藉助vue-cropper做圖片裁剪的詳細內容。更多資訊請關注PHP中文網其他相關文章！