js添加水印封装

• 使用方法

import Watermark from './watermark.js'
//添加水印
const str1 = "我是第一行";
const str2 = "我是第二行";
Watermark.set(`${str1}\n${str2}`);
//删除水印
Watermark.remove();

• 新建watermark.js

let watermark = {};
let setWatermark = async (str1) => {
    let id = '1.23952389169.123912915';
    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id))
    }
    let width = 450;
    let height = 250;
    //创建一个画布
    let can = document.createElement('canvas')
    //设置画布的长宽
    can.width = width
    can.height = height
    let cans = can.getContext('2d')
    //旋转角度
    cans.rotate(-8 * Math.PI / 180)
    cans.font = '12px Vedana'
    //设置填充绘画的颜色、渐变或者模式
    //cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
    cans.fillStyle = '#666666'
    //设置文本内容的当前对齐方式
    cans.textAlign = 'left'
    //设置在绘制文本时使用的当前文本基线
    cans.textBaseline = 'Middle'
    
    await wrapText(cans, str1, 50, 80, 0, 30);
    let div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '40px'
    div.style.left = '0px'
    div.style.opacity = '0.2'
    div.style.position = 'fixed'
    div.style.zIndex = '100000'
    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;
}

//换行绘制
function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split('\n');
    var line = '';
    for (var i = 0; i < words.length; i++) {
        var testLine = line + words[i] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && i > 0) {
            context.fillText(line, x, y);
            line = words[i] + ' ';
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}

//添加水印方法
watermark.set = async (str1) => {
    let id = await setWatermark(str1);
    //删除重绘
    setInterval(() => {
        if (document.getElementById(id) === null) {
            setWatermark(str1)
        }
    }, 2000)
    //视图改变重绘
    let time = null;
    window.onresize = () => {
        if (time != null) {
            clearTimeout(time)
        }
        time = setTimeout(function () {
            setWatermark(str1);
        }, 1000)
    }
}

//删除水印方法
watermark.remove = () => {
    let id = '1.23952389169.123912915'
    if (document.getElementById(id) !== null) {
        //document.body.removeChild(document.getElementById(id))
        const div = document.getElementById(id)
        div.style.display = 'none'
    }
}


export default watermark