基於vue的圖片裁剪vue-cropper（本地圖片和網絡圖片）

插件安裝：

　　npm i vue-cropper

引入插件：

　　1.組件內使用

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

　　2.main.js中使用

import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

代碼：

上傳圖片或者選擇網絡圖片

<!-- <el-upload
                    class="avatar-uploader"
                    action
                    :http-request="uploadFileMethodAnswer"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                > -->
                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                <i class="el-icon-plus avatar-uploader-icon" @click="dialogVisibleF(-1)"></i>
                <!-- </el-upload> -->

剪切彈出框：

<el-dialog
            title="圖片剪裁(為確保剪切后圖片的分辨率足夠，請盡量不縮放剪切原圖)"
            :visible.sync="dialogVisibleCropper"
            append-to-body
            width="70%"
        >
            <div class="cropper-content">
                <div class="cropper" style="text-align: center;">
                    <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.size"
                        :outputType="option.outputType"
                        :info="true"
                        :full="option.full"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixedBox="option.fixedBox"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
                    ></vueCropper>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleCropper = false">取 消</el-button>
                <el-button type="primary" @click="finish" :loading="loading">確認</el-button>
            </div>
        </el-dialog>

參數配置：（參考官網：https://www.npmjs.com/package/vue-cropper）

data() {
        return {
            option: {
                img: '',
                outputSize: 1, // 剪切后的圖片質量（0.1-1）
                full: false, // 輸出原圖比例截圖 props名full
                outputType: 'png',
                canMove: true,
                original: false,
                canMoveBox: true,
                autoCrop: true,
                autoCropWidth: 800,
                autoCropHeight: 450,
                fixedBox: false,
                fixed: true,
                maxImgSize: 3000, // 圖片最大像素
                fixedNumber: [16, 9]
            },
        };
    },

方法：

// uploadFileMethodAnswer(file, fileList) {
        //     let booler = true;
        //     booler = this.beforeAvatarUpload(file);
        //     if (booler === false) {
        //         return;
        //     }
        //     const _this = this;
        //     // let imgName = "";
        //     const fileObj = file.raw;
        //     if (window.FileReader) {
        //         let reader = new FileReader();
        //         // 轉化為blob
        //         reader.readAsArrayBuffer(fileObj);
        //         // 轉化為base64
        //         // reader.readAsDataURL(fileObj);
        //         reader.onload = e => {
        //             let data;
        //             if (typeof e.target.result === 'object') {
        //                 // 把Array Buffer轉化為blob 如果是base64不需要
        //                 data = window.URL.createObjectURL(new Blob([e.target.result]));
        //             } else {
        //                 data = e.target.result;
        //             }
        //             _this.$nextTick(() => {
        // _this.option.img = data;
        //                 _this.dialogVisibleCropper = true;
        //             });
        //         };
        //     }
        // },
        finish() {
            let _this = this;
            this.$refs.cropper.getCropBlob(data => {
                let base64Data = null;
                let a = new FileReader();
                a.onload = function(e) {
                    base64Data = e.target.result;
                    _this.loading = true;
                    const formData = new FormData();
                    formData.append('imageFile', base64Data);
                    uploadImgBase64({
                        formData: formData,
                        uploadCode: true
                    })
                        .then(res => {
                            if (res.code === 200) {
                                if (res.data.length !== 0) {
                                    _this.imgInfoEidt.bannerUrl = res.data[0];
                                    _this.$message.success('圖片上傳成功！');
                                    _this.dialogVisibleCropper = false;
                                    _this.loading = false;
                                } else {
                                    _this.loading = false;
                                    _this.$message.error('圖片上傳失敗！');
                                }
                            } else {
                                _this.loading = false;
                                _this.$message.error('圖片上傳失敗！');
                            }
                        })
                        .catch(() => {
                            _this.loading = false;
                            // this.$message.error('圖片上傳失敗！');
                        });
                };
                a.readAsDataURL(data);
            });
        },

注：選擇網絡圖片會遇到圖片跨域問題

處理：訪問的服務器允許，資源跨域使用，也就是說設置了CORS跨域配置，Access-Control-Allow-Origin

前端直接使用圖片路徑：this.option.img = url; // url 圖片網絡路徑