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

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

前言

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

Vue Cropper

安裝

npm install vue-cropper

yarn add vue-cropper

在 component 裡使用

import { VueCropper } from "vue-cropper";

components: {
 VueCropper,
},

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); }); }, },

最後在 component 的綁定

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

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

資料來源：vue-cropper