您现在的位置是:首页 > 正文

vue 水印添加

2024-02-01 05:55:55阅读 2

效果图
在这里插入图片描述

src/utils/waterMark.js

/* eslint-disable */

var defaultSettings = {
	watermark_id: "wm_div_id", // 水印总体的id
	watermark_prefix: "mask_div_id", // 小水印的id前缀
	watermark_txt: "测试水印", // 水印的内容
	watermark_x: 20, // 水印起始位置x轴坐标
	watermark_y: 20, // 水印起始位置Y轴坐标
	watermark_rows: 0, // 水印行数
	watermark_cols: 0, // 水印列数
	watermark_x_space: 50, // 水印x轴间隔
	watermark_y_space: 50, // 水印y轴间隔
	watermark_font: "微软雅黑", // 水印字体
	watermark_color: "black", // 水印字体颜色
	watermark_fontsize: "18px", // 水印字体大小
	watermark_alpha: 0.15, // 水印透明度,要求设置在大于等于0.005
	watermark_width: 100, // 水印宽度
	watermark_height: 100, // 水印长度
	watermark_angle: 15, // 水印倾斜度数
	watermark_parent_width: 0, // 水印的总体宽度(默认值:body的scrollWidth和clientWidth的较大值)
	watermark_parent_height: 0, // 水印的总体高度(默认值:body的scrollHeight和clientHeight的较大值)
	watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
	monitor: true, // monitor 是否监控, true: 不可删除水印; false: 可删水印。
};

class WaterMark {
	constructor(options) {
		this.globalSetting = null;
		this.init(options);
	}
	settingsToDefaultSetting(settings) {
		defaultSettings.watermark_id =
			settings.watermark_id || defaultSettings.watermark_id;
		defaultSettings.watermark_prefix =
			settings.watermark_prefix || defaultSettings.watermark_prefix;
		defaultSettings.watermark_txt =
			settings.watermark_txt || defaultSettings.watermark_txt;
		defaultSettings.watermark_x =
			settings.watermark_x || defaultSettings.watermark_x;
		defaultSettings.watermark_y =
			settings.watermark_y || defaultSettings.watermark_y;
		defaultSettings.watermark_rows =
			settings.watermark_rows || defaultSettings.watermark_rows;
		defaultSettings.watermark_cols =
			settings.watermark_cols || defaultSettings.watermark_cols;
		defaultSettings.watermark_x_space =
			settings.watermark_x_space || defaultSettings.watermark_x_space;
		defaultSettings.watermark_y_space =
			settings.watermark_y_space || defaultSettings.watermark_y_space;
		defaultSettings.watermark_font =
			settings.watermark_font || defaultSettings.watermark_font;
		defaultSettings.watermark_color =
			settings.watermark_color || defaultSettings.watermark_color;
		defaultSettings.watermark_fontsize =
			settings.watermark_fontsize || defaultSettings.watermark_fontsize;
		defaultSettings.watermark_alpha =
			settings.watermark_alpha || defaultSettings.watermark_alpha;
		defaultSettings.watermark_width =
			settings.watermark_width || defaultSettings.watermark_width;
		defaultSettings.watermark_height =
			settings.watermark_height || defaultSettings.watermark_height;
		defaultSettings.watermark_angle =
			settings.watermark_angle || defaultSettings.watermark_angle;
		defaultSettings.watermark_parent_width =
			settings.watermark_parent_width || defaultSettings.watermark_parent_width;
		defaultSettings.watermark_parent_height =
			settings.watermark_parent_height ||
			defaultSettings.watermark_parent_height;
		defaultSettings.watermark_parent_node =
			settings.watermark_parent_node || defaultSettings.watermark_parent_node;
		defaultSettings.monitor = settings.monitor || defaultSettings.monitor;
	}
	loadMark(settings) {
		/* 采用配置项替换默认值,作用类似jquery.extend*/
		if (arguments.length === 1 && typeof arguments[0] === "object") {
			var src = arguments[0] || {};
			for (const key in src) {
				if (
					src[key] &&
					defaultSettings[key] &&
					src[key] === defaultSettings[key]
				)
					continue;
				/* veronic: resolution of watermark_angle=0 not in force*/ else if (
					src[key] ||
					src[key] === 0
				)
					defaultSettings[key] = src[key];
			}
		}

		this.settingsToDefaultSetting(settings);

		/* 如果元素存在则移除*/
		var watermark_element = document.getElementById(
			defaultSettings.watermark_id
		);
		watermark_element &&
			watermark_element.parentNode &&
			watermark_element.parentNode.removeChild(watermark_element);
		/* 如果设置水印挂载的父元素的id*/
		var watermark_parent_element = document.getElementById(
			defaultSettings.watermark_parent_node
		);
		var watermark_hook_element = watermark_parent_element || document.body;
		/* 获取页面宽度*/
		var page_width = Math.max(
			watermark_hook_element.scrollWidth,
			watermark_hook_element.clientWidth
		);
		/* 获取页面最大长度*/
		var page_height = Math.max(
			watermark_hook_element.scrollHeight,
			watermark_hook_element.clientHeight
		);

		var setting = arguments[0] || {};
		var parentEle = watermark_hook_element;

		var page_offsetTop = 0;
		var page_offsetLeft = 0;
		if (setting.watermark_parent_width || setting.watermark_parent_height) {
			/* 指定父元素同时指定了宽或高*/
			if (parentEle) {
				page_offsetTop = parentEle.offsetTop || 0;
				page_offsetLeft = parentEle.offsetLeft || 0;
				defaultSettings.watermark_x =
					defaultSettings.watermark_x + page_offsetLeft;
				defaultSettings.watermark_y =
					defaultSettings.watermark_y + page_offsetTop;
			}
		} else {
			if (parentEle) {
				page_offsetTop = parentEle.offsetTop || 0;
				page_offsetLeft = parentEle.offsetLeft || 0;
			}
		}
		/* 创建水印外壳div*/
		var otdiv = document.getElementById(defaultSettings.watermark_id);
		var shadowRoot = null;
		if (!otdiv) {
			otdiv = document.createElement("div");
			/* 创建shadow dom*/
			otdiv.id = defaultSettings.watermark_id;
			// pointer-events: none !important  不会影响原有的DOM操作
			otdiv.setAttribute(
				"style",
				"pointer-events: none !important; display: block !important"
			);
			/* 判断浏览器是否支持attachShadow方法*/
			if (typeof otdiv.attachShadow === "function") {
				/* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
				shadowRoot = otdiv.attachShadow({ mode: "open" });
			} else {
				shadowRoot = otdiv;
			}
			/* 将shadow dom随机插入body内的任意位置*/
			var nodeList = watermark_hook_element.children;
			var index = Math.floor(Math.random() * (nodeList.length - 1));
			if (nodeList[index]) {
				watermark_hook_element.insertBefore(otdiv, nodeList[index]);
			} else {
				watermark_hook_element.appendChild(otdiv);
			}
		} else if (otdiv.shadowRoot) {
			shadowRoot = otdiv.shadowRoot;
		}
		/* 三种情况下会重新计算水印列数和x方向水印间隔:1、水印列数设置为0,2、水印宽度大于页面宽度,3、水印宽度小于于页面宽度*/
		defaultSettings.watermark_cols = parseInt(
			(page_width - defaultSettings.watermark_x) /
				(defaultSettings.watermark_width + defaultSettings.watermark_x_space) ||
				0
		);
		var temp_watermark_x_space = parseInt(
			(page_width -
				defaultSettings.watermark_x -
				defaultSettings.watermark_width * defaultSettings.watermark_cols) /
				defaultSettings.watermark_cols
		);
		defaultSettings.watermark_x_space = temp_watermark_x_space
			? defaultSettings.watermark_x_space
			: temp_watermark_x_space;
		var allWatermarkWidth;
		/* 三种情况下会重新计算水印行数和y方向水印间隔:1、水印行数设置为0,2、水印长度大于页面长度,3、水印长度小于于页面长度*/
		defaultSettings.watermark_rows = parseInt(
			(page_height - defaultSettings.watermark_y) /
				(defaultSettings.watermark_height +
					defaultSettings.watermark_y_space) || 0
		);
		var temp_watermark_y_space = parseInt(
			(page_height -
				defaultSettings.watermark_y -
				defaultSettings.watermark_height * defaultSettings.watermark_rows) /
				defaultSettings.watermark_rows
		);
		defaultSettings.watermark_y_space = temp_watermark_y_space
			? defaultSettings.watermark_y_space
			: temp_watermark_y_space;
		var allWatermarkHeight;

		if (watermark_parent_element) {
			allWatermarkWidth =
				defaultSettings.watermark_x +
				defaultSettings.watermark_width * defaultSettings.watermark_cols +
				defaultSettings.watermark_x_space *
					(defaultSettings.watermark_cols - 1);
			allWatermarkHeight =
				defaultSettings.watermark_y +
				defaultSettings.watermark_height * defaultSettings.watermark_rows +
				defaultSettings.watermark_y_space *
					(defaultSettings.watermark_rows - 1);
		} else {
			allWatermarkWidth =
				page_offsetLeft +
				defaultSettings.watermark_x +
				defaultSettings.watermark_width * defaultSettings.watermark_cols +
				defaultSettings.watermark_x_space *
					(defaultSettings.watermark_cols - 1);
			allWatermarkHeight =
				page_offsetTop +
				defaultSettings.watermark_y +
				defaultSettings.watermark_height * defaultSettings.watermark_rows +
				defaultSettings.watermark_y_space *
					(defaultSettings.watermark_rows - 1);
		}

		var x;
		var y;
		for (var i = 0; i < defaultSettings.watermark_rows; i++) {
			if (watermark_parent_element) {
				y =
					page_offsetTop +
					defaultSettings.watermark_y +
					(page_height - allWatermarkHeight) / 2 +
					(defaultSettings.watermark_y_space +
						defaultSettings.watermark_height) *
						i;
			} else {
				y =
					defaultSettings.watermark_y +
					(page_height - allWatermarkHeight) / 2 +
					(defaultSettings.watermark_y_space +
						defaultSettings.watermark_height) *
						i;
			}
			for (var j = 0; j < defaultSettings.watermark_cols; j++) {
				if (watermark_parent_element) {
					x =
						page_offsetLeft +
						defaultSettings.watermark_x +
						(page_width - allWatermarkWidth) / 2 +
						(defaultSettings.watermark_width +
							defaultSettings.watermark_x_space) *
							j;
				} else {
					x =
						defaultSettings.watermark_x +
						(page_width - allWatermarkWidth) / 2 +
						(defaultSettings.watermark_width +
							defaultSettings.watermark_x_space) *
							j;
				}
				var mask_div = document.createElement("div");
				var oText = document.createTextNode(defaultSettings.watermark_txt);
				mask_div.appendChild(oText);
				/* 设置水印相关属性start*/
				mask_div.id = defaultSettings.watermark_prefix + i + j;
				/* 设置水印div倾斜显示*/
				mask_div.style.webkitTransform =
					"rotate(-" + defaultSettings.watermark_angle + "deg)";
				mask_div.style.MozTransform =
					"rotate(-" + defaultSettings.watermark_angle + "deg)";
				mask_div.style.msTransform =
					"rotate(-" + defaultSettings.watermark_angle + "deg)";
				mask_div.style.OTransform =
					"rotate(-" + defaultSettings.watermark_angle + "deg)";
				mask_div.style.transform =
					"rotate(-" + defaultSettings.watermark_angle + "deg)";
				mask_div.style.visibility = "";
				mask_div.style.position = "absolute";
				/* 选不中*/
				mask_div.style.left = x + "px";
				mask_div.style.top = y + "px";
				mask_div.style.overflow = "hidden";
				mask_div.style.zIndex = "9999999";
				mask_div.style.opacity = defaultSettings.watermark_alpha;
				mask_div.style.fontSize = defaultSettings.watermark_fontsize;
				mask_div.style.fontFamily = defaultSettings.watermark_font;
				mask_div.style.color = defaultSettings.watermark_color;
				mask_div.style.textAlign = "center";
				mask_div.style.width = defaultSettings.watermark_width + "px";
				mask_div.style.height = defaultSettings.watermark_height + "px";
				mask_div.style.display = "block";
				mask_div.style["-ms-user-select"] = "none";
				/* 设置水印相关属性end*/
				shadowRoot.appendChild(mask_div);
			}
		}
		this.observerFunc(settings, watermark_hook_element);
	}
	observerFunc(settings, watermark_hook_element) {
		// monitor 是否监控, true: 不可删除水印; false: 可删水印。
		// 监听dom是否被移除或者改变属性的回调函数
		var callback = (records) => {
			if (
				(this.globalSetting && records.length === 1) ||
				(records.length === 1 && records[0].removedNodes.length >= 1)
			) {
				this.loadMark(this.globalSetting);
			}
		};
		const MutationObserver =
			window.MutationObserver ||
			window.WebKitMutationObserver ||
			window.MozMutationObserver;
		var watermarkDom = new MutationObserver(callback);
		var option = {
			childList: true,
			attributes: true,
			subtree: true,
		};
		const minotor =
			settings.monitor === undefined
				? defaultSettings.monitor
				: settings.monitor;
		if (minotor) {
			watermarkDom.observe(watermark_hook_element, option);
			watermarkDom.observe(
				document.getElementById("wm_div_id").shadowRoot,
				option
			);
		}
	}
	removeMark() {
		/* 移除水印*/
		/* 采用配置项替换默认值,作用类似jquery.extend*/
		if (arguments.length === 1 && typeof arguments[0] === "object") {
			var src = arguments[0] || {};
			for (const key in src) {
				if (
					src[key] &&
					defaultSettings[key] &&
					src[key] === defaultSettings[key]
				)
					continue;
				/* veronic: resolution of watermark_angle=0 not in force*/ else if (
					src[key] ||
					src[key] === 0
				)
					defaultSettings[key] = src[key];
			}
		}

		/* 移除水印*/
		var watermark_element = document.getElementById(
			defaultSettings.watermark_id
		);
		var _parentElement = watermark_element.parentNode;
		_parentElement.removeChild(watermark_element);
	}
	init(settings) {
		this.globalSetting = settings;
		this.loadMark(settings);
		window.addEventListener("onload", () => {
			this.loadMark(settings);
		});
		window.addEventListener("resize", () => {
			this.loadMark(settings);
		});
	}
	load(settings) {
		/* 手动加载水印*/
		this.globalSetting = settings;
		this.loadMark(settings);
	}
	remove() {
		/* 手动移除水印*/
		this.removeMark();
	}
}

export default WaterMark;

main.ts中引用

import WaterMark from "@/utils/waterMark.js";
function warter_mark(str: any) {
  new WaterMark({
    watermark_rows: 20, // 水印行数
    watermark_txt: str, // 水印内容
    watermark_width: 120, // 水印宽度
    watermark_color: "", // 字体颜色
    watermark_fontsize: "16px", // 字体大小
    watermark_angle: 40, // 字体倾斜角度
    watermark_height: 140, // 水印长度
    watermark_y_space: 10, // Y轴间隔
    watermark_alpha: "0.1", // 水印字体透明度
  });
}
warter_mark("gongxifacai");

网站文章

  • 用计算机算标准曲线,标准曲线计算软件

    用计算机算标准曲线,标准曲线计算软件

    标准曲线计算器电脑版是一款可计算标准曲线的电脑计算器软件。计算过标准曲线的用户都应该知道标准曲线的计算挺麻烦的,而且计算结果要非常的精准才可以。本软件已经设置好了公式,您只要往里面添加数据就可以得出标...

    2024-02-01 05:55:46
  • Java求geometry的面积最小外接矩形

    Java求geometry的面积最小外接矩形

    Java求geometry的面积最小外接矩形 geom.getEnvelope() 得到外接矩形,不一定是面积最小;可以对多边形的每一条边求外接矩形,然后比较得到面积最小外接矩形。这篇博客将分为3步进...

    2024-02-01 05:55:39
  • 常见的Web应用攻击手段

    常见的Web应用攻击手段 1.XSS攻击 XSS攻击即跨站点脚本攻击(Cross Site Script),指黑客通过篡改网页,注入恶意HTML脚本,在用户浏览网页时,控制用户浏览器进行恶意操作的一种...

    2024-02-01 05:55:09
  • unity 检测物体是否在相机视野范围内

    脚本挂在摄像机要显示的对象上前提:该对象有 render 组件public class visibleTT : MonoBehaviour{ public bool isRendering = false; public float lastTime = 0; public float curTime = 0; void Update() {

    2024-02-01 05:55:03
  • androidstudio 使用正则表达式替换xml相关内容

    androidstudio 使用正则表达式替换xml相关内容

    例如我在xml文件中,需要在edittext增加限制输入数据类型为数字类型 在替换栏中使用$n(n代表正则表达式中括号的索引,从1开始)来保存原来的换行等需要保留的内容 替换后的效果: ...

    2024-02-01 05:54:56
  • 企业的述职如何做才有效?

    企业的述职如何做才有效?

    有句话说的好,群众的眼睛是雪亮的。他们的回答是完全走形式,我的上级就在述职现场那我肯定挑好的说,作用不大。每年的问题都差不多,每年都述职,我都没感觉了。让所有的参与人,包括评估者和被评估者正确理解36...

    2024-02-01 05:54:50
  • 移植RTT--官方教程

    移植RTT--官方教程

    CPU架构移植:大部分的CPU都移植好了,不太需要用户去操作。libcpu文件夹里面就是各种的CPU架构。主要处理标红四个函数: 函数和变量 描述 rt_base_t rt_hw_interrupt_...

    2024-02-01 05:54:20
  • 怎样做到长期写一个价值博客?

    怎样做到长期写一个价值博客?

    怎样做到长期写一个价值博客?(一)为什么你应该(从现在开始就)写博客用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处。(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太...

    2024-02-01 05:54:14
  • XxlJob(一) 分布式定时任务XxlJob用法及核心调度源码详解

    XxlJob(一) 分布式定时任务XxlJob用法及核心调度源码详解

    XxlJob是目前最流行的分布式定时任务中间件,对比quartz,代码的侵入明显少了很多,而且admin组件提供了可视化ui, 简单易用,目前已经接入几百家物联网公司使用,由此可见XxlJob的强大任务调度能力为广大开发者所认可,那XxlJob是怎么工作的? XxlJob最新依赖版本: 2.3.0 和源码地址: com.xuxueli ...

    2024-02-01 05:54:08
  • java 数据库 html_HTML,Java,C语言,SQL数据库常用单词汇集1

    HTMLlist 列表;img 图片(image);&amp; nbsp; 空格(&amp;和n之间的空格去掉,不要忘记分号); (文字末尾添加)换行;background 背景;position 位...

    2024-02-01 05:53:40