VUE項目中實現DOM模糊化效果

這是一段將DOM元素模糊成圖片的代碼

<template>
    <div class="gauss-blur-wrap">
        <Spin v-if="showBlur" fix></Spin>
        <div :ref="`sourceBox${rand}`">
            <slot></slot>
        </div>
        <img v-show="true" :id="`tempImg${rand}`" :src="`${tempImg}`"></img>
        <canvas :id="`gauss-blur-canvas${rand}`" :width="canvasWidth" :height="canvasHeight"></canvas>
    </div>
</template>

<script>
    import html2canvas from "html2canvas";
    import * as StackBlur from "stackblur-canvas";

    /**
     * 對 GaussBlur 標籤包圍內的部分進行模糊化處理，且會刪除原DOM元素
     * 強依賴組件 html2canvas stackblur-canvas
     * html2canvas 將 DOM 轉爲圖片
     * stackblur-canvas 對圖片進行模糊化處理
     * 當有異步請求時，用加載變量控制展現 <GaussBlur v-if="!loading">，
     * loading 初始值需爲true，爲false的話會多渲染一遍組件，且沒有DOM，致使報錯
     * 無異步請求時，可不用任何參數
     *
     * <img 只爲臨時保存轉換好的圖版
     * <canvas 用於模糊化後展現
     */
    export default {
        name: "gauss-blur",
        data() {
            return {
                showBlur: true,
                tempImg: '',
                canvasWidth: '',
                canvasHeight: '',

                rand: Math.random(),
                processFlag: true
            }
        },
        created() {
            this.setTimeProcess();
        },
        methods: {
            setTimeProcess() {
                let _this = this;
                // 因爲有異步請求只用 $nextTick 還不能在徹底在執行後調用
                setTimeout(() => {
                    // 請求成功，更新完 DOM 後再轉成base64的圖
                    _this.$nextTick(() => {
                        _this.toImage();
                    })
                }, 0);
            },
            toImage() {
                let _this = this;
                let _source = this.$refs[`sourceBox${this.rand}`];

                if (_source) {
                    html2canvas(_source, {backgroundColor: null})
                      .then((canvas) => {
                          let _dataURL = canvas.toDataURL("image/png");

                          // 給臨時圖片、canvas 加寬高
                          _this.canvasWidth = this.$el.getBoundingClientRect().width;
                          _this.canvasHeight = this.$el.getBoundingClientRect().height;
                          _this.tempImg = _dataURL;

                          // 在圖片加載完成後再刪除DOM
                          let _tempImg = document.getElementById(`tempImg${_this.rand}`);

                          _tempImg.onload = function () {
                              //調用模糊處理
                              StackBlur.image(`tempImg${_this.rand}`, `gauss-blur-canvas${_this.rand}`, 5, true);
                              // 刪掉原有DOM內容
                              _source.remove();
                              _tempImg.remove();


                              // 把loading 效果去掉
                              _this.showBlur = false;
                          }
                      });
                }

            }
        }
    }
</script>

<style scoped>
    .gauss-blur-wrap {
        position: relative;

        .ivu-spin-fix {
            background-color: hsla(0, 0%, 100%, 1);
            z-index: 99999;
        }
    }
</style>

.vue 文件中的用法

<GaussBlur>
  <div>要模糊的代碼</div>
</GaussBlur>