Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

水印目的

版权保护:水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息,以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时,可以追溯到原始作者或版权所有者,从而加强版权保护。

身份识别:水印可以用作作者或品牌的标识符,使观众能够轻松识别内容的来源。这对于在社交媒体上分享内容或在网络上发布作品的个人、摄影师、设计师或公司来说尤为重要。

品牌宣传:水印可以帮助提升品牌知名度和曝光度。通过在图片或视频中添加品牌标识,品牌可以在内容被分享或传播时获得额外的宣传效果。

内容跟踪:通过在内容中添加水印,可以跟踪内容的传播和使用情况。这对于了解内容在网络上的传播路径、受众和影响力等信息是有帮助的。

Api介绍

MutationObserver API 是 Web API 的一部分,用于监视 DOM 树的变化。它允许开发者注册一个回调函数,该函数在指定的 DOM 节点或子树发生变化时被调用。MutationObserver 是一个强大的工具,可以用于监视并响应 DOM 中的变化,而无需使用传统的事件监听器。

主要的组成部分包括:

MutationObserver 对象:用于观察 DOM 树的变化。通过创建 MutationObserver 的实例并传入一个回调函数,可以开始监视指定节点或节点集合的变化。

观察目标:要监视的 DOM 节点或节点集合。MutationObserver 可以观察单个节点、节点列表,甚至整个文档的变化。

回调函数:MutationObserver 注册的回调函数在观察的节点发生变化时被调用。回调函数接收一个 MutationRecord 对象数组作为参数,该数组包含描述每个变化的信息。

变化记录(MutationRecord):描述 DOM 变化的对象。每个 MutationRecord 包含有关变化类型、受影响的节点、以及相关信息的详细信息。

MutationObserver API 的使用场景包括但不限于:

监视 DOM 中特定元素的属性变化。
监视子节点的添加、移除或替换。
监视文本内容的变化。
实时监视动态加载的内容变化。

实现逻辑:

1、通过手写组件的方式,将需要添加水印的内容放入组件内

2、通过props传入不同内容,实现自定义水印内容、字体大小、水印之间的间隔等等

3、通过canvas来画出水印文字,最后将canvas画出的内容转换为图片

4、通过MutationObserverAPI来监听水印元素被删除、被修改属性的变化

先上结果图片:

代码讲解在vue3版本中

Vue2版本:

代码࿱

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/792068.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Web 基础与HTTP 协议

域名的概述 (1 )域名的结构 (2 )域名结构类型 根域:指的是根服务器,要用来管理互联网的主目录,全世界只有13台。1个为 主根服务器,放置在美国。其余12 个均为辅根服务器,其中9个放置在美国;欧 洲2个&…

一文清晰了解表格表单

一、表格 要想实现下述内容&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"GBK"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

无线LED显示屏:信息传播新潮流

随着信息技术的飞速发展&#xff0c;无线LED显示屏以其独特的优势在信息传播领域崭露头角。本文将详细介绍无线LED显示屏的特点及其在现代信息传播中的作用。 组网规模的无限可能 无线LED显示屏通过GSM、GPRS、CDMA、3G等无线网络实现信息的远程、实时发布&#xff0c;采用TCP/…

cadence23中 PCB Editer导入元器件

cadence的文件架构&#xff1a; 1 .dra文件是元器件封装的可编辑文件 2 .psm是cadence元器件封装的cadence的识别文件&#xff0c;cadence只识别.psm,不识别.dra 3..dra是元器件的封装文件&#xff0c;由.pad焊盘文件和丝印组成 .dra .psm文件放在一个文件夹中&#xff0c;…

31. 1049. 最后一块石头的重量 II, 494.目标和,474.一和零

class Solution { public:int lastStoneWeightII(vector<int>& stones) {int sum 0;for(int stone : stones) sum stone;int bagSize sum /2;vector<int> dp(bagSize 1, 0);for(int i 0; i < stones.size(); i){ //遍历物品for(int j bagSize; j >…

迅为RK3588S开发板广泛用于边缘技术,人工智能,智能家居,智慧零售,智能网关等

性能强 iTOP-3588S开发板采用瑞芯微RK3588S处理器&#xff0c;是全新一代AloT高端应用芯片&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构主频高达2.4GHZ&#xff0c;8GB内存&#xff0c;32GBEMMC。 四核心架构GPU内置GPU可以完全兼容0penGLES1.1…

动漫3d模型设计需要注意什么?---模大狮模型网

设计动漫3D模型时&#xff0c;有几个方面需要注意&#xff1a; 保持角色风格一致性&#xff1a; 动漫通常有独特的风格和美学&#xff0c;设计时要确保模型与所代表的角色或作品的整体风格相符。注意保持线条和比例的一致性&#xff0c;使模型能够忠实地呈现原作的特点。 注重…

c++初阶学习----入门(下)

承接上篇&#xff0c;我们在上一篇博客中提及过&#xff0c;我们c入门还有一些。这一篇博客会着重写重载和引用。当然还会有一些其他的知识点。但是大家主要是需要了解这两个重点。好&#xff0c;那么我们马上来讲讲今天的主题。 引用 引用的含义 好我们还是先看含义引⽤不是…

【GreenHills】GHS-Servecode的查看和说明

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 在Green Hills客户申请license试用以及正式文件的Servecode编号会有不同&#xff0c;该文档对此进行说明并如何主动查看Servecode&#xff0c;并且说明Servecode的类别&#xff0c;通过Servecode了解客户授权情况。 …

【鸿蒙学习笔记】使用axios进行HTTP数据请求

官方文档&#xff1a;网络管理开发概述 目录标题 访问淘宝公开接口&#xff08;测试数据&#xff09;第1步&#xff1a;module.json5 配置网络授权第2步&#xff1a;下载axios第3步&#xff1a;源码第4步&#xff1a;启动模拟器第5步&#xff1a;启动entry第6步&#xff1a;操…

ChIP项目文章CMI(IF=24.1)|IRF1激活可促进辐射诱导的细胞死亡和炎症反应

2024年6月7日&#xff0c;四川大学张舒羽教授团队在Cellular & Molecular Immunology&#xff08;IF24.1&#xff09;期刊上发表了题为“Chaperone-and PTM-mediated activation of IRF1 tames radiation-induced cell death and inflammation response”的文章&#xff0c…

专注于国产FPGA芯片研发的异格技术Pre-A+轮融资,博将控股再次投资

近日&#xff0c;苏州异格技术有限公司&#xff08;以下简称“异格技术”&#xff09;宣布成功完成数亿元的Pre-A轮融资&#xff0c;由博将控股在参与Pre-A轮投资后&#xff0c;持续投资。这标志着继2022年获得经纬中国、红点中国、红杉中国等机构数亿元天使轮融资后&#xff0…

FastAPI 学习之路(三十四)数据库多表操作

之前我们分享的是基于单个表的数据库表的操作&#xff0c;我们在设计数据库的时候也设计了跨表&#xff0c;我们可以看下数据库的设计 class User(Base):__tablename__ "users"id Column(Integer, primary_keyTrue, indexTrue)email Column(String(10), uniqueTr…

java线程锁synchronized的几种情况

一、对象方法锁 1、成员方法加锁 同一个对象成员方法有3个synchronized修饰的方法&#xff0c;通过睡眠模拟业务操作 public class CaseOne {public synchronized void m1(){try { TimeUnit.SECONDS.sleep(3); } catch (InterruptedException e) { e.printStackTrace()…

【机器学习】朴素贝叶斯算法详解与实战扩展

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 引言 朴素贝叶斯算法是一种基于概率统计的分类方法&#xff0c;它利用贝叶斯定理和特征条件独立假设来预测样本的类别。尽管其假设特征之间相互独立在现实中往往不成立&#xff0c;但朴素贝叶斯分类器因其计算…

vscode单独设置项目的字符集

vscode有个默认的字符集&#xff0c;直接修改这里的话将会修改整个vscode工具的字符集。如果不同的项目使用不同的字符集&#xff0c;就不能修改这个默认的设置了。而是需要针对每个项目进行修改。 修改方法&#xff1a; 使用shiftctrlp进入settings的菜单页面&#xff0c;点击…

Leetcode—236. 二叉树的最近公共祖先【中等】

2024每日刷题&#xff08;142&#xff09; Leetcode—236. 二叉树的最近公共祖先 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL…

怎么把便签主面板置顶 便签主面板置顶方法

作为一名经常需要处理大量信息和任务的作家&#xff0c;我发现便签记事真的是我的救星。无论是临时灵感、会议要点还是待办事项&#xff0c;便签都能帮我快速记录&#xff0c;让我不再遗漏任何重要信息。而且&#xff0c;便签的应用场景也非常广泛&#xff0c;无论是在电脑前写…

王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

本内容是基于王道计算机数据结构的插入排序、冒泡排序、希尔排序、快速排序、简单选择排序整理。 文章目录 插入排序算法性能代码 冒泡排序算法性能代码 希尔排序算法性能代码 快速排序算法性能代码 简单选择排序算法性能代码 插入排序 算法 算法思想&#xff1a;每次将一个…

LLM代理应用实战:构建Plotly数据可视化代理

如果你尝试过像ChatGPT这样的LLM&#xff0c;就会知道它们几乎可以为任何语言或包生成代码。但是仅仅依靠LLM是有局限的。对于数据可视化的问题我们需要提供一下的内容 描述数据:模型本身并不知道数据集的细节&#xff0c;比如列名和行细节。手动提供这些信息可能很麻烦&#…