vue项目水印添加

川长思鸟来 2022-09-03 04:29 212阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

import DomSize from 'wd-domsize-monitor'; // 此处为 npm 下载的第三方模块包
    import Api_login from "@/assets/api/login" // 此处是用户信息接口调用
    
    var id = 'shuiyinDiv'
    var isInit = false
    let callback = function (ele) { 
        DomSize.bind(ele, function () { 
            //水印被删除
            DomSize.remove(ele);
            waterMark(callback)
        })
    
    }
    var waterMark = function (callback) { 
        let old = document.getElementById(id)
        if (old) { 
            old.remove()
        }
        function textBecomeImg(text, fontsize, fontcolor) { 
            var canvas = document.createElement('canvas');
            let $buHeight = 0;
            if (fontsize <= 32) {  $buHeight = 99; }
            else if (fontsize > 32 && fontsize <= 60) {  $buHeight = 2; }
            else if (fontsize > 60 && fontsize <= 80) {  $buHeight = 4; }
            else if (fontsize > 80 && fontsize <= 100) {  $buHeight = 6; }
            else if (fontsize > 100) {  $buHeight = 10; }
            canvas.height = fontsize + $buHeight;
            canvas.padding = 30;
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width * 2, canvas.height);
            context.fillStyle = fontcolor;
            context.font = fontsize + "px Arial";
            context.textAlign = "center";
            context.textBaseline = 'middle';
            context.fillText(text, 0, fontsize / 2);
            var canvasWidth = canvas.width / 99;
            canvasWidth = context.measureText(text).width;
            canvas.width = 250;
            canvas.height = 120;
            context.fillStyle = fontcolor;
            context.font = fontsize + "px Arial";
            context.textBaseline = 'middle';
            context.fillText(text, 0, fontsize / 2);
            var dataUrl = canvas.toDataURL('image/png');
            return dataUrl;
        }
    
        var createEle = function () { 
    
            // var loginName = userInfoData.mobile ? userInfoData.mobile.substr(userInfoData.mobile.length - 4, 4) : ""
            var text = userInfoData.name + "-" + userInfoData.mobilePhone;
            var shuiyinEle = document.createElement('div');
            shuiyinEle.id = id
            var style = shuiyinEle.style;
            style.position = 'fixed';
            style.left = '-50%';
            style.top = '-50%';
            style.width = '200%';
            style.height = '200%';
            style.opacity = '0.1';
            style.background = "url(" + textBecomeImg(text, 16, "#666666") + ")";
            style.zIndex = 9999999991;
            style.transform = "rotate(-30deg)";
            style.pointerEvents = "none";
            document.body.appendChild(shuiyinEle);
            callback(shuiyinEle)
            var target = document.getElementById(id);
            var observer = new MutationObserver(function (mutations) { 
                mutations.forEach(function (mutation) { 
                    observer.disconnect();
                    reset()
                });
            });
            var config = {  attributes: true, childList: true, characterData: true };
            observer.observe(target, config);
        }
    
        var userInfoData = localStorage.getItem('userInfo')
        userInfoData = JSON.parse(userInfoData)
    
        if (!userInfoData || !userInfoData.name) { 
            Api_login.getUserInfo()
                .then(response => { 
                    userInfoData = response.result;
                    // localStorage.setItem('accessToken', response.result)
                    createEle()
                }).catch(err => { 
                    isInit = false
                })
        } else { 
            createEle()
        }
    }
    var reset = function () { 
        waterMark(callback)
    }
    var init = function () { 
        waterMark(callback)
    }
    
    export default init;

# 在 App.vue中使用 #

<template>
      <div id="app">
        <keep-alive>
           <router-view></router-view>
        </keep-alive>
      </div>
    </template>
    
    <script>
    import waterMark from "./libs/watermark"
    export default { 
        name: 'App',
        data() { 
            return { }
        },
        computed: { },
        created() { },
        mounted() { 
            waterMark()
        },
        methods: { }
    }
    </script>
    
    <style>
    #app { 
      background: url('./assets/bg.gif') repeat;
      background-color: #0a0a0a !important;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20220829/084c75c1c4254877ba9620dc49878e18.png