关于vue.js: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>