/*
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-12-18 11:02:55
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-12-18 11:23:55
|
* @FilePath: \jczz_web\src\warterMarkVUE.js
|
* @Description:
|
*
|
* Copyright (c) 2023 by shuishen, All Rights Reserved.
|
*/
|
/*水印配置*/
|
//声明
|
let watermark = {};
|
//水印配置
|
let setWatermark = (str) => {
|
let id = "1.23452384164.123412415";
|
// 移除水印 判断
|
if (document.getElementById(id) !== null) {
|
document.body.removeChild(document.getElementById(id));
|
}
|
|
//创建画布
|
let createCanvas = document.createElement("canvas");
|
// 设置canvas画布大小
|
createCanvas.width = 200; //宽度
|
createCanvas.height = 160; //高度
|
|
//创建Context2D对象作为2D渲染的上下文。
|
let Context2D = createCanvas.getContext("2d");
|
/*水印样式调整配置*/
|
Context2D.rotate((-20 * Math.PI) / 100); // 水印旋转角度
|
Context2D.font = "16px Vedana"; //水印文字大小
|
Context2D.fillStyle = "#fff"; //水印颜色 HEX格式,可使用red 或者rgb格式
|
Context2D.textAlign = "center"; //水印水平位置
|
Context2D.textBaseline = "Middle"; //水印垂直位置
|
Context2D.fillText(str, createCanvas.width / 2.8, createCanvas.height / 1);
|
|
//创建元素
|
let createDiv = document.createElement("div");
|
createDiv.id = id;
|
//水印默认设置
|
createDiv.style.pointerEvents = "none"; //水印层事件穿透 让水印不阻止交互事件
|
createDiv.style.top = "0px"; //水印顶部距离
|
createDiv.style.left = "0px"; //水印左侧距离
|
createDiv.style.opacity = "0.3"; //水印透明度
|
createDiv.style.position = "fixed"; //水印定位
|
createDiv.style.zIndex = "100000"; //水印样式优先显示
|
createDiv.style.width = document.documentElement.clientWidth + "px"; //水印宽度
|
createDiv.style.height = document.documentElement.clientHeight + "px"; //水印高度
|
createDiv.style.background =
|
"url(" +
|
createCanvas.toDataURL("image/png") +
|
") left top repeat, rgba(0, 0, 0, 0.3)"; //水印显示(关键代码)
|
document.body.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点
|
return id;
|
};
|
|
// 此方法只允许调用一次
|
watermark.set = (str) => {
|
let id = setWatermark(str);
|
//设置间隔
|
setInterval(() => {
|
if (document.getElementById(id) === null) {
|
id = setWatermark(str);
|
}
|
}, 500);
|
//改变大小时执行
|
window.onresize = () => {
|
setWatermark(str);
|
};
|
};
|
|
export default watermark;
|
