vue后台水印实现

vue后台水印实现

Vue项目在页面添加水印功能

创建watermark.js文件

<template>
    <router-view
        v-waterMark="waterCode"
    ></router-view>
</template>

<script>
import waterMark from 'common/utils/watermark';
export default {
    directives: {
        waterMark: waterMark,
    },
    computed: {
        waterCode() {
            return {text: `平台机密数据`,
                    style: {
                        'width': 700, // 单个水印的宽
                        'height': 300, // 单个水印的高
                        'font': 'normal 22px Microsoft Yahei', // 设置样式
                        'fillStyle': 'rgba(112, 113, 114, 0.1)', // 水印字体颜色
                        'rotate': (30 * Math.PI / 180), // 水印偏转角度
                    },
            };
        },
    },
};
</script>

/**
 * @file 网页水印
 */
/*eslint-disable*/
let watermark = {
    text: 'text',
    style: {},
    isAllowDele: false,
    maskDiv: '',
    init: (text) => {
        let canvas = document.createElement('canvas');
        canvas.id = 'canvas';
        canvas.width = watermark.style.width; // 单个水印的宽高
        canvas.height = watermark.style.height;
        watermark.maskDiv = document.createElement('div');
        let ctx = canvas.getContext('2d');
        ctx.font = watermark.style.font; // 设置样式
        ctx.fillStyle = watermark.style.fillStyle; // 水印字体颜色
        ctx.rotate(watermark.style.rotate); // 水印偏转角度
        // convas 设置换行
        CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
            if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
                return;
            }
            var context = this;
            var canvas = context.canvas;
            if (typeof maxWidth == 'undefined') {
                maxWidth = (canvas && canvas.width) || watermark.style.width;
            }
            if (typeof lineHeight == 'undefined') {
                lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
            }
            // 字符分隔为数组
            var arrText = text.split('');
            var line = '';
            for (var n = 0; n < arrText.length; n++) {
                var testLine = line + arrText[n];
                var metrics = context.measureText(testLine);
                var testWidth = metrics.width;
                if (testWidth > maxWidth && n > 0) {
                    context.fillText(line, x, y);
                    line = arrText[n];
                    y += lineHeight;
                } else {
                    line = testLine;
                }
            }
            context.fillText(line, x, y);
        };
        ctx.wrapText(watermark.text, 30, 20);
        let src = canvas.toDataURL('image/png');
        watermark.maskDiv.style.position = 'fixed';
        watermark.maskDiv.style.zIndex = '9999';
        watermark.maskDiv.id = '_waterMark';
        watermark.maskDiv.style.top = '60px';
        watermark.maskDiv.style.left = '0';
        watermark.maskDiv.style.height = '100%';
        watermark.maskDiv.style.width = '100%';
        watermark.maskDiv.style.pointerEvents = 'none';
        watermark.maskDiv.style.backgroundImage = 'URL(' + src + ')';
        // 水印节点插到body下
        document.body.appendChild(watermark.maskDiv);
    },
    // 防删机制
    monitor: () => {
        let body = document.getElementsByTagName('body')[0];
        let options = {
            childList: true,
            attributes: true,
            characterData: true,
            subtree: true,
            attributeOldValue: true,
            characterDataOldValue: true
        }
        let observer = new MutationObserver(watermark.callback);
        observer.observe(body, options); // 监听body节点
    },
    // DOM改变执行callback
    callback: (mutations, observer) => {
        // 当attribute属性被修改
        if (mutations[0].target.id === '_waterMark') {
            watermark.removeMaskDiv();
        }
        // 当id被改变时
        if (mutations[0].attributeName === 'id') {
            watermark.removeMaskDiv();
            watermark.init();
        }
        // 当节点被删除
        if (mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
            watermark.init();
        }
    },
    /* public */
    // 手动销毁水印DOM
    removeMaskDiv: () => {
        document.body.removeChild(watermark.maskDiv);
    },
    render: () => {
        // let maskBox = document.querySelector('#_waterMark');
        if (!watermark.maskDiv) {
            watermark.init();
            // 是否允许通过js或开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除）,true为允许, 默认不允许
            if (!watermark.isAllowDele) {
                // 设置水印节点修改的DOM事件
                watermark.monitor();
            }
        }
    }
  }

  export default {
    bind(el, binding, vnode) {
        const options = binding.value;
        watermark.style =  options.style;
        watermark.text = options.text;
        watermark.isAllowDele = options.isAllowDele;
        watermark.render();
    },
    update(element, data) {
        if (data.value.text !== data.oldValue.text) {
            watermark.text = data.value.text;
            watermark.removeMaskDiv();
            watermark.render();
        }
    },
  };