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();
})