vue2.js添加水印

通过canvas生成水印图片

function addWaterMark(str) {
    let ctx = document.createElement("canvas");
    ctx.width = 900;
    ctx.height = 450;
    ctx.style.display = "none";
    let cans = ctx.getContext("2d");
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = "18px SimHei";
    cans.fillStyle = "rgba(46, 52, 64, 0.15)";
    cans.textAlign = "center";
    cans.textBaseline = "bottom";
    cans.fillText(str, 350, 350);
    cans.save();
    return ctx.toDataURL();
}

main.vue 添加水印

new Promise((resolve) => {
    const beforeEle = document.getElementById('watermark__wrapper');
    const parentEle = document.body;
    // 移除原先的
    if(beforeEle) parentEle.removeChild(beforeEle);
    const url = addWaterMark(“水印”);
	const ele = document.createElement("div");
    ele.id = 'watermark__wrapper';
	ele.style = `position: fixed; inset: 0; z-index: 2001; pointer-events: none; user-select: none; background-image: url(${url}); display: ${this.authority === 2 && res.data.watermark === 1 ? 'block' : 'none'};`;
	parentEle.appendChild(ele);
	resolve();
})