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

前言

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

Vue Cropper

  1. 安裝

    1
    2
    3
    npm install vue-cropper

    yarn add vue-cropper
  2. 在 component 裡使用

    1
    2
    3
    4
    5
    import { VueCropper } from "vue-cropper";

    components: {
    VueCropper,
    },
  3. data 跟 methods 的設定:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 的綁定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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