Web watermark

// Outermost div Add   Or add... To the part that needs watermark 
<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';
/* *  Set the method set of watermark , According to the need to use  *  User account name , Display name , Last four digits of mobile phone  */
const contentMap = {
    
    isAddUserName: 'userName',
    isAddShowName: 'showName',
    isAddEmployee: 'mobilePhone',
};

export default {
    
    data() {
    
        return {
    
            userInfo: {
    },   // User information 
        }
    },

    methods: {
    
    	 // Get user information interface 
        async getMyInfoApi() {
    
            try {
    
                const res = await apis.getMyInfo();
                return res;
            } catch(e) {
    
                console.log(e);
            }
        },
        
		 // Whether there is a watermark configuration interface on this page 
        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  Unique identification of the watermark configuration item  * @param {*} vm vue example  * @param {*} opt  Configuration item  * @returns */
        async canvasWMByWMConfig(key, vm, opt = {
     }) {
    
            this.userInfo = await this.getMyInfoApi();  // Get user information 
            let watermarkConfigList = await this.getWatermarkByGroupIdApi();  // Whether there is a watermark configuration interface on this page 

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

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

            if(!activeItem) {
    
                console.log(` This page is not configured with a watermark  key=${
      key}`);
                return; 
            }

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

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

        /** * * @param {*} params objec Configuration item  * @param {*} vm vue example  * @param {*} opt  Configuration item  */
        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]] || '';  // User information telephone writing 
                        contentArr.push(mobilePhone.slice(-4));
                    } else {
    
                        let str = this.userInfo.data[contentMap[key]] || '';
                        contentArr.push(str);
                    }
                }
            }
            opt.content = contentArr.join(' ');
            this._canvasWM(opt);
        },

        /** * canvas  Realization  watermark  Internal methods  * @param {*} param0  Configuration item  */
        _canvasWM({
    
            selector = 'body',
            width = '200px',
            height = '150px',
            textAlign = 'center',
            textBaseline = 'middle',
            font = '14px Microsoft Yahei',
            fillStyle = 'rgba(229, 229, 229, 0.6)',
            content = ' Please don't spread it out ',
            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);
            }
            
        }

    }
}