Vue - 页面添加水印效果
Vue - 页面添加水印效果
原创
已于 2022-07-18 15:52:26 修改
·
7.6k 阅读
·
7
·
24
·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：
#vue.js
于 2021-09-03 17:25:33 首次发布
Vue__插件、依赖的使用
专栏收录该内容
22 篇文章
订阅专栏
本文介绍了如何在Vue项目中创建watermark.js文件，用于生成全屏或指定容器的水印效果。通过设置水印的字体、颜色、位置等属性，并在页面加载和销毁时调用水印方法，实现在页面背景或特定元素上显示水印。示例代码展示了全屏水印和指定容器水印的使用方法。
摘要生成于
C知道
，由 DeepSeek-R1 满血版支持，
前往体验 >
Vue 页面中使用水印效果
水印效果使用方法
水印效果
全屏水印
指定容器水印
使用方法
项目中新建一个 watermark.js 文件
let watermark = {};
let setWatermark = (text, sourceBody) => {
let id =
Math.random() * 10000 +
"-" +
Math.random() * 10000 +
"/" +
Math.random() * 10000;
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
let can = document.createElement("canvas");
can.width = 120; //设置水印之间的左右间距
can.height = 80; //设置水印之间的上下间距
let cans = can.getContext("2d");
cans.rotate((-20 * Math.PI) / 180);
cans.font = "15px Vedana";
cans.fillStyle = "rgba(0, 0, 0, .5)";
cans.textAlign = "left";
cans.textBaseline = "Middle";
cans.fillText(text, can.width / 20, can.height);
let water_div = document.createElement("div");
water_div.id = id;
water_div.className = "watermarkClass";
water_div.style.pointerEvents = "none";
water_div.style.background =
"url(" + can.toDataURL("image/png") + ") left top repeat";
if (sourceBody) {
water_div.style.width = "100%";
water_div.style.height = "100%";
sourceBody.appendChild(water_div);
} else {
water_div.style.top = "3px";
water_div.style.left = "0px";
water_div.style.position = "fixed";
water_div.style.zIndex = "100000";
water_div.style.width = document.documentElement.clientWidth + "px";
water_div.style.height = document.documentElement.clientHeight + "px";
document.body.appendChild(water_div);
}
return id;
};
/**
* 该方法只允许调用一次
* @param:
* @text == 水印内容
* @sourceBody == 水印添加的位置，不传就是body
* */
watermark.set = (text, sourceBody) => {
const domArr = Array.from(document.getElementsByClassName("watermarkClass"));
for (let i = 0; i < domArr.length; i++) {
const element = domArr[i];
// element.parentNode.removeChild(element);
element.remove();
}
if (text == "") {
return;
}
setWatermark(text, sourceBody);
// let id = setWatermark(text, sourceBody);
// setInterval(() => {
// if (document.getElementById(id) === null) {
// id = setWatermark(text, sourceBody);
// }
// }, 2000);
// window.onresize = () => {
// setWatermark(text, sourceBody);
// };
};
export default watermark;
main.js 中引入 watermark.js
// 引入水印文件地址
import watermark from './util/watermark.js'
Vue.prototype.$watermark = watermark
页面中使用 this.$watermark.set(text，dom)
参数说明是否必填text水印内容是dom水印容器。若不传，则全屏水印，若传，则指定容器。否（1）全屏水印
（2）指定容器水印