From 160272de5778bddbd8386f647258c95ecf9e02a5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 19 Dec 2023 11:39:07 +0800
Subject: [PATCH] 水印处理
---
src/warterMarkVUE.js | 43 ++++++++++++++++++++++++++++++-------------
1 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/src/warterMarkVUE.js b/src/warterMarkVUE.js
index d1e5537..bf147c6 100644
--- a/src/warterMarkVUE.js
+++ b/src/warterMarkVUE.js
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-12-18 11:02:55
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-12-18 17:55:12
+ * @LastEditTime: 2023-12-19 11:37:53
* @FilePath: \jczz_web\src\warterMarkVUE.js
* @Description:
*
@@ -10,10 +10,16 @@
*/
/*水印配置*/
//声明
+let id = "1.23452384164.123412415";
let watermark = {};
+let time,
+ textStr = "";
+
+function handleResize() {
+ setWatermark(textStr);
+}
//水印配置
let setWatermark = (str) => {
- let id = "1.23452384164.123412415";
// 移除水印 判断
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
@@ -22,18 +28,18 @@
//创建画布
let createCanvas = document.createElement("canvas");
// 设置canvas画布大小
- createCanvas.width = 320; //宽度
- createCanvas.height = 200; //高度
+ createCanvas.width = 340; //宽度
+ createCanvas.height = 160; //高度
//创建Context2D对象作为2D渲染的上下文。
let Context2D = createCanvas.getContext("2d");
/*水印样式调整配置*/
- Context2D.rotate((-20 * Math.PI) / 100); // 水印旋转角度
+ Context2D.rotate((-10 * Math.PI) / 100); // 水印旋转角度
Context2D.font = "16px Vedana"; //水印文字大小
- Context2D.fillStyle = "#fff"; //水印颜色 HEX格式,可使用red 或者rgb格式
+ Context2D.fillStyle = "#999"; //水印颜色 HEX格式,可使用red 或者rgb格式
Context2D.textAlign = "center"; //水印水平位置
Context2D.textBaseline = "Middle"; //水印垂直位置
- Context2D.fillText(str, createCanvas.width / 3.2, createCanvas.height / 1);
+ Context2D.fillText(str, createCanvas.width / 2.4, createCanvas.height / 1);
//创建元素
let createDiv = document.createElement("div");
@@ -50,24 +56,35 @@
createDiv.style.background =
"url(" +
createCanvas.toDataURL("image/png") +
- ") left top repeat, rgba(0, 0, 0, 0.3)"; //水印显示(关键代码)
+ ") left top repeat, rgba(0, 0, 0, 0.01)"; //水印显示(关键代码)
document.body.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点
return id;
};
// 此方法只允许调用一次
watermark.set = (str) => {
+ textStr = str;
let id = setWatermark(str);
//设置间隔
- setInterval(() => {
+ time = setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str);
}
}, 500);
- //改变大小时执行
- window.onresize = () => {
- setWatermark(str);
- };
+ // 添加 resize 事件处理函数
+ window.addEventListener("resize", handleResize);
+};
+
+watermark.remove = () => {
+ var element = document.getElementById(id);
+ // 删除元素
+ if (element !== null) {
+ clearInterval(time);
+
+ window.removeEventListener("resize", handleResize);
+
+ element.parentNode.removeChild(element);
+ }
};
export default watermark;
--
Gitblit v1.9.3