步骤一:创建watermark.js文件(可以自己设置属性)
/** 水印添加方法 */ const setWatermark = (str1, str2) => { const id = "1.23452384164.123412415"; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } const can = document.createElement("canvas"); // 设置canvas画布大小 can.width = 350; can.height = 280; const cans = can.getContext("2d"); cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度 cans.font = "30px Vedana"; //水印的字体大小 cans.fillStyle = "rgba(121, 121, 121,0.5)"; //水印的字体颜色 cans.textAlign = "center"; //水印的位置 cans.textBaseline = "Middle"; cans.fillText(str1, can.width / 2, can.height); // 水印在画布的位置x,y轴 cans.fillText(str2, can.width / 2, can.height + 22); const div = document.createElement("div"); div.id = id; div.style.pointerEvents = "none"; div.style.top = "10px"; div.style.left = "0px"; div.style.opacity = "0.15"; 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; }; // 添加水印方法 export const setWaterMark = (str1, str2) => { let id = setWatermark(str1, str2); if (document.getElementById(id) === null) { id = setWatermark(str1, str2); } }; // 移除水印方法 export const removeWatermark = () => { const id = "1.23452384164.123412415"; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } };
步骤二:哪一个页面需要水印,则引入这个文件
import { removeWatermark, setWaterMark } from './watermark'
步骤三:设置水印内容,以及清除水印
mounted() { setWaterMark('', '水印内容') }, destroyed() { removeWatermark() },
标签:25,style,const,水印,添加,div,document,id From: https://www.cnblogs.com/chenJieLing/p/17532387.html