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版本:

代码࿱

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot对ZonedDateTime返回结果json是string-源码分析

springboot对ZonedDateTime返回结果json是string-源码分析 application/json格式默认使用ObjectMapper实例进行序列化ObjectMapper自动注入分析springboot关于jackson配置 java.time.ZonedDateTime application/json格式默认使用ObjectMapper实例进行序列化 controller返回后&…

人形机器人的理想与现实

李开复曾提到过一个AI界流传的“骗子又来了曲线”。 人会不断给机器进行“是否具有人类智能”的鉴定,而这个过程,总是从被人工智能在某些领域的惊艳表现震撼,到逐渐认识到当时的人工智能还有各种局限,以至于产生巨大心理落差。 近…

html js 3d z轴移动 实现星空

用chatgpt还有kimi 让实现动画效果的星空,都太垃圾了 不是y轴移动,就是x轴移动, 我要z轴移动,他们就是搞不出来, ai写代码还有很长的路。 <!DOCTYPE html> <meta charset="utf-8" /> <head> <title>ai相关博客</title> </h…

【操作系统】手把手带你搭建DNS服务器!

DNS服务器 DNS服务器指域名系统或者域名服务。域名系统为Internet上的主机分配域名地址和IP地址&#xff0c;用户使用域名地址&#xff0c;该系统就会自动把域名地址转为IP地址。域名服务是运行域名系统的Internet工具。执行域名服务的服务器称之为DNS服务器&#xff0c;通过DN…

51单片机嵌入式开发:8、 STC89C52RC 操作LCD1602原理

STC89C52RC 操作LCD1602原理 1 LCD1602概述1.1 LCD1602介绍1.2 LCD1602引脚说明1.3 LCD1602指令介绍 2 LCD1602外围电路2.1 LCD1602接线方法2.2 LCD1602电路原理 3 LCD1602软件操作3.1 LCD1602显示3.2 LCD1602 protues仿真 4 总结 1 LCD1602概述 1.1 LCD1602介绍 LCD1602是一种…

maven——(重要)手动创建,构建项目

创建项目 手动按照maven层级建好文件夹&#xff0c;并写上java&#xff0c;测试代码和pom文件 构建项目 在dos窗口中执行如下命令 compile编译 当前maven仓库中什么都没有。 在pom所在层级下&#xff0c;执行&#xff1a; mvn compile 就开始显示下面这些&#xff0c;…

数据库-ubuntu环境下安装配置mysql

文章目录 什么是数据库&#xff1f;一、ubuntu环境下安装mysql二、配置mysql配置文件1.先登上root账号2.配置文件的修改show engines \G; mysql和mysqld数据库的基础操作登录mysql创建数据库显示当前数据库使用数据库创建表插入students表数据打印students表数据select * from …

前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作,Cesium作为底图(可拖拽的视频实时播放弹框,底层元素可以正常操作)

简述&#xff1a;在前端开发中&#xff0c;弹框和实时视频播放是常见的需求。这里来简单记录一下&#xff0c;如何使用Vue.js和Element UI实现一个可拖动的弹框&#xff0c;并在其中播放实时视频。同时&#xff0c;确保在拖拽弹框时&#xff0c;底层元素仍然可以操作。这里来记…

vue 画二维码及长按保存

需求 想要做如下图的二维码带文字&#xff0c;且能够长按保存 前期准备 一个canvas安装qrcode&#xff08;命令&#xff1a;npm i qrcode&#xff09; 画二维码及文字 初始化画布 <template><div><canvas ref"canvas" width"300" he…

JAVASE进阶day07(泛型,集合,Set,TreeSet,枚举,数据结构)

泛型 1.泛型的基本使用 限制集合存储的数据类型 package com.lu.day07.generics;/*** 定义了一个泛型类* E 泛型通配字母(不固定代替真实数据类型A-Z都可以)* 常见的泛型通配字母:* E:element 元素* T:type 类型* R:return 返回值类型* K:key 键* …

14.爬虫---Selenium 经典动态渲染工具的使用

14.Selenium 经典动态渲染工具的使用 1.查看chrome浏览器版本2.ChromeDriver 安装3.Selenium 安装4.验证安装5.基本用法5.1启动浏览器5.2导航到页面5.3查找元素5.3.1单个元素 find_element5.3.2多个元素 find_elements 5.4 执行操作5.5 动作链ActionChains5.6 执行 JavaScript …

Python基础语法:运算符详解(算术运算符、比较运算符、逻辑运算符、赋值运算符)②

文章目录 Python中的运算符详解一、算术运算符二、比较运算符三、逻辑运算符四、赋值运算符五、综合示例结论 Python中的运算符详解 在Python编程中&#xff0c;运算符用于执行各种操作&#xff0c;例如算术计算、比较、逻辑判断和赋值。了解并掌握这些运算符的使用方法是编写…

N-(4-Azido-2-nitrophenyl)-N‘‘-biotinylnorspemidine

​一、基本信息 常用名&#xff1a;N-(4-Azido-2-nitrophenyl)-N-biotinylnorspemidine 英文名&#xff1a;N-(4-Azido-2-nitrophenyl)-N-biotinylnorspemidine CAS号&#xff1a;786609-83-4 分子式&#xff1a;C22H33N9O4S 分子量&#xff1a;519.62 二、结构特点 该化…

SQL职场必备:掌握数据库技能提升职场竞争力

&#x1f482; 个人网站:【 摸鱼游戏】【网址导航】【神级代码资源网站】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

vue3 + tsx 表格 Action 单独封装组件用法

前言 先上图看右侧列 action 的 UI 效果&#xff1a; 正常来说&#xff0c;如果一个表格的附带 action 操作&#xff0c;我们一般会放在最右侧的列里面实现&#xff0c;这个时候有些UI 框架支持在 SFC 模板里面定义额外的 solt&#xff0c;当然如果不支持&#xff0c;更通用的…

Linux进行vi编译代码出现“E45: ‘readonly‘ option is set (add ! to override)”(完美解决)。

用vi修改文件&#xff0c;保存文件时&#xff0c;提示没有修改该文件的权限“E45: ‘readonly’ option is set (add ! to override)”的解决方法。 E45: ‘readonly’ option is set (add ! to override) 如果您遇到了“当前用户没有权限对文件作修改”的错误 1. 检查文件…

2024.7.11最新版IDM破解,操作简单

前言 IDM的强劲对手&#xff0c;100%免费&#xff0c;如果破解IDM失败&#xff0c;推荐使用FDM&#xff0c;下载地址&#xff1a;Free Download Manager 破解步骤 打开PowerShell&#xff0c;非CMD 在左下角开始菜单右键点击后选择PowerShell&#xff0c;注意不是打开CMD。…

园林类专刊《花卉》简介及投稿邮箱

园林类专刊《花卉》简介及投稿邮箱 《花卉》杂志是经国家新闻出版总署批准&#xff0c;广东省农业科学院主管&#xff0c;广东省农业科学院环境园艺研究所主办&#xff0c;面向国内外公开发行林业系统专业期刊&#xff0c;是全国从事林业、园林、生态、环保、旅游、自然资源、…

CentOS7安装部署git和gitlab

安装Git 在Linux系统中是需要编译源码的&#xff0c;首先下载所需要的依赖&#xff1a; yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker方法一 下载&#xff1a; wget https://mirrors.edge.kernel.org/pub/s…

【文档+源码+调试讲解】冷冻仓储管理系统

摘 要 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的冷冻仓储管理系统&#xff0c;会使冷冻仓储管理系统工作系统化、规范化&#xff0c;也会提高冷冻仓储管理系统平台形象&#x…