圖片剪裁套件的使用 - Vue-Cropper

Vue Cropper 這個套件使用起來非常方便，而且剛好符合我的需求，只需要看著文件設置一些設定就可以做出變化了。

前言

當主管告知需要在後台將前台的圖片做剪裁修改後，並且能夠即時預覽結果，最後再將圖片存成新檔案。找了一下有沒有前人造的輪子，發現還真的有，所以設置了一下後就可以達到我要的效果了。

Vue Cropper

1. 安裝

   npm install vue-cropper

   yarn add vue-cropper

1. 在 component 裡使用

   import { VueCropper } from "vue-cropper";

   components: {
    VueCropper,
   },

1. data 跟 methods 的設定：

data() {
    return {
      modelSrc: "",
      option: {
        img: "https://fakeimg.pl/450x300/", // 圖片來源
        outputType: "png", // 產生圖片的格式
        autoCrop: true, // 是否要有截圖框
        autoCropWidth: 350, // 截圖框寬
        autoCropHeight: 220, //截圖框高
      },
    };
  },
  methods: {
  // *********預覽目前截圖結果************
    preview() {
      this.$refs.cropper.getCropData((data) => {
        // console.log(data);
        this.modelSrc = data;
      });
    },
  // *********即時預覽函數************
    realTime(data) {
      this.previews = data;
      // console.log(data);
    },
    // *********得到截圖的 base64 數據************
    demo() {
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
      });
    },
  },

1. 最後在 component 的綁定

   <vueCropper
    ref="cropper"
     :img="option.img"
     :outputType="option.outputType"
     :autoCrop="option.autoCrop"
     :autoCropWidth="option.autoCropWidth"
     :autoCropHeight="option.autoCropHeight"
     @realTime="realTime"
    >
    </vueCropper>

這樣就會產生一個可以自由切割並且截圖的區塊，可以試著玩看看我建立的 CodeSandBox：

最後要記得給這個 component 一個高度，不然會顯示不出來。

資料來源：vue-cropper