Vue3给页面背景添加水印（可局部添加水印）

本代码为给页面局部添加水印，参考给全页面背景添加水印教程vue3+ts+vite页面添加水印效果（Watermark）_vue3 ts水印插件-CSDN博客。

test.vue

需要修改的地方：

①将ref="watermarkContainer"添加到希望有水印的对应容器上。

②修改导入的地址import { getmark } from '../composables/watermark';

watermark.ts

export const getmark = () => {

const setWatermark = (str: any, container: HTMLElement) => {

const id = "1.23452384164.123412416";

const existingWatermark = document.getElementById(id);

if (existingWatermark !== null) {

container.removeChild(existingWatermark);

}

// 创建一个新的canvas元素，用于绘制水印图像

const can = document.createElement("canvas");

// 设置canvas的宽度和高度

can.width = 150;

can.height = 120;

// 获取canvas的2D渲染上下文

const cans = can.getContext("2d")!;

// 旋转canvas的角度（逆时针15度）

cans.rotate((-15 * Math.PI) / 180);

// 设置字体样式

cans.font = "18px Vedana";

// 设置填充颜色和透明度

cans.fillStyle = "rgba(200, 200, 200, 0.80)";

// 设置文本对齐方式

cans.textAlign = "left";

// 在canvas上绘制文本，参数分别是文本内容，x坐标和y坐标

cans.fillText(str, can.width / 8, can.height / 2);

const div = document.createElement("div");

div.id = id;

div.style.pointerEvents = "none";

div.style.position = "absolute";

div.style.zIndex = "10";

div.style.width = `${container.clientWidth}px`;

div.style.height = `${container.clientHeight}px`;

div.style.background = `url(${can.toDataURL("image/png")}) left top repeat`;

container.appendChild(div);

return id;

};

// 定义一个watermark函数，用于在给定的容器中创建水印

const watermark = (str: string, container: HTMLElement) => {

// 调用setWatermark函数创建水印，并获取其ID

let id = setWatermark(str, container);

// 设置一个定时器，每隔500毫秒检查水印是否存在，如果不存在则重新创建

setInterval(() => {

if (document.getElementById(id) === null) {

id = setWatermark(str, container);

}

}, 500);

// 当窗口大小改变时，重新创建水印

window.onresize = () => {

setWatermark(str, container);

};

};

return { watermark };

};

效果：