怎么给页面增加水印

效果图：

实现方式

1. 主要是使用canvas
2. 设置样式和位置

代码

let watermark = {};

let setWatermark = (str, str1) => {
    let id = 'waterMarker';

    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }

    let can = document.createElement('canvas');
    can.width = 240;
    can.height = 180;

    let cans = can.getContext('2d');
    cans.rotate((-15 * Math.PI) / 180);
    cans.font = '16px Vedana'; // 设置字体样式
    cans.fillStyle = 'rgba(128,128,128, 0.4)'; // 设置字体的填充颜色
    cans.textAlign = 'left'; // 设置字体的对其方式
    cans.textBaseline = 'Middle'; // 设置字体的文本基线
    cans.fillText(str, can.width / 3, can.height / 1.5);
    cans.fillText(str1, can.width / 5, can.height / 1.3);

    let div = document.createElement('div');
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '0';
    div.style.left = '0';
    div.style.position = 'fixed';
    div.style.zIndex = '999';
    div.style.width = document.documentElement.clientWidth + 'px';
    div.style.height = document.documentElement.clientHeight + 'px';
    div.style.background =
        'url(' + can.toDataURL('image/png') + ') left top repeat';
    document.body.appendChild(div);
    return id;
};

// 该方法只允许调用一次
watermark.set = (str, str1) => {
    setWatermark(str, str1);
    // setInterval(() => {
    //     if (document.getElementById(id) === null) {
    //         id = setWatermark(str, str1);
    //     }
    // }, 500);
    // window.onresize = () => {
    //     setWatermark(str, str1);
    // };
};
export default watermark;

使用

 warterMark.set(getCurrentUser().name, DateTool.format(new Date(), 'yyyy-MM-dd HH:mm:ss'));

效果完美，还可以自己配置不同的样式风格。