web-水印

//最外面div加 或需要水印得部分加
<div id="mainTable"></div>
import waterMark from '../../common/js/waterMark.js';
export default {
	mixins: [waterMark],
	mounted() {
    this.canvasWMByWMConfig('PASSENGE_FLOW_EPIDEMIC_EN', this, {
      selector: '#mainTable',
    });
	}
}

import apis from '../../api/board';
/*
 * 设置水印的方法集，按需使用
 * 用户账号名，显示名，手机后四位
 */
const contentMap = {
    isAddUserName: 'userName',
    isAddShowName: 'showName',
    isAddEmployee: 'mobilePhone',
};

export default {
    data() {
        return {
            userInfo: {},   //用户信息
        }
    },

    methods: {
    	 //获取用户信息接口
        async getMyInfoApi() {
            try {
                const res = await apis.getMyInfo();
                return res;
            } catch(e) {
                console.log(e);
            }
        },
        
		 //该页面是否存在水印配置接口
        async getWatermarkByGroupIdApi(){
            let params = {
                groupId: this.userInfo.data.groupId || 0
            }
            
            try {
                const res = await apis.getWatermarkByGroupId(params);
                return res;
            }catch(e) {
                console.log(e);
            }
        },

        /**
         * 
         * @param {*} key 水印配置项的唯一标识
         * @param {*} vm vue实例
         * @param {*} opt 配置项
         * @returns 
         */
        async canvasWMByWMConfig(key, vm, opt = {}) {
            this.userInfo = await this.getMyInfoApi();  //获取用户信息
            let watermarkConfigList = await this.getWatermarkByGroupIdApi();  //该页面是否存在水印配置接口

            setTimeout(() => {
                canvasWMByWMConfig(key, vm, opt)
            }, 100);

            const activeItem = watermarkConfigList.find(item => item.watermarkFieldAliasName === key);

            if(!activeItem) {
                console.log(`该页面没有配置水印  key=${key}`);
                return; 
            }

            const contentOpt = {
                isAddUserName: activeItem.isAddUserName,
                isAddShowName: activeItem.isAddShowName,
                isAddEmployee: activeItem.isAddEmployee,
              };

            this.canvasWM(contentOpt, vm, opt);
        },

        /**
         * 
         * @param {*} params objec配置项
         * @param {*} vm vue实例
         * @param {*} opt 配置项
         */
        canvasWM(params, vm, opt = {}) {
            console.log("params, vm, opt = {}",params, vm, opt);  //{isAddEmployee: 1, isAddShowName: 1,isAddUserName: 1} VueComponent{...} {selector: '#mainTable',content: 'whh 1233'}
            const contentArr = [];
            for(let key in params) {
                if(params[key]) {
                    if(key === 'isAddEmployee') {
                        let mobilePhone = this.userInfo.data[contentMap[key]] || '';  //用户信息电话写入
                        contentArr.push(mobilePhone.slice(-4));
                    } else {
                        let str = this.userInfo.data[contentMap[key]] || '';
                        contentArr.push(str);
                    }
                }
            }
            opt.content = contentArr.join(' ');
            this._canvasWM(opt);
        },

        /**
         * canvas 实现 watermark 内部方法
         * @param {*} param0 配置项
         */
        _canvasWM({
            selector = 'body',
            width = '200px',
            height = '150px',
            textAlign = 'center',
            textBaseline = 'middle',
            font = '14px Microsoft Yahei',
            fillStyle = 'rgba(229, 229, 229, 0.6)',
            content = '请勿外传',
            rotate = '-10',
            zIndex = 1000,
        } = {}) {
            const container = document.querySelector(selector);
            const canvas = document.createElement('canvas');
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            const ctx = canvas.getContext('2d');
            ctx.textAlign = textAlign;
            ctx.textBaseline = textBaseline;
            ctx.font = font;
            ctx.fillStyle = fillStyle;
            ctx.rotate((Math.PI / 180) * rotate);
            ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
            const base64Url = canvas.toDataURL();
            const __wm = document.querySelector(`${selector} .__wm`);
            const watermarkDiv = __wm || document.createElement('div');
            const styleStr = `
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:${zIndex};
            pointer-events:none;
            background-repeat:repeat;
            background-image:url('${base64Url}')`;
            watermarkDiv.setAttribute('style', styleStr);
            watermarkDiv.classList.add('__wm');
            if(!__wm){
                container.style.position = 'relative';
                container.insertBefore(watermarkDiv, container.firstChild);
            }
            
        }

    }
}