Vue实现防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

1、演示

2、水印的目的

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

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

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

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

3、实话实说

如果通过我们技术层面要解决这种安全或者是版权之类的问题,只能说起一定的作用,增加那些不怀好意的人操作难度。

要说能够完全防止住,那是不可能的,一定是技术手段和非技术手段相结合,双管齐下。这样才能确保万无一失。

总之:防君子不防小人

 4、API介绍(MutationObserver

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

主要的组成部分包括:

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

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

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

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

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

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

通过 MutationObserver,开发者可以更加灵活地监控 DOM 变化,实现更加复杂和高效的 DOM 操作和交互。

5、实现逻辑

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

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

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

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

6、代码

1、使用水印组件的代码

<template>
  <div class="container">
    <Watermark text="版权所有123">
      <div class="item">秘密</div>
    </Watermark>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Watermark from '@/components/Watermark/index.vue'
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .item {
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: #fff;
    font-size: 50px;
    background-color: #266fff;
  }
}
</style>

2、水印组件代码

<template>
  <div class="watermark" ref="parent">
    <slot></slot>
  </div>
</template>

<script setup>
import directive from '@/directive'
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
const parent = ref(null)
const props = defineProps({
  text: {
    type: String,
    required: true,
    default: 'watermark',
  },
  fontSize: {
    type: Number,
    default: 32,
  },
  // 水印的间隔
  gap: {
    type: Number,
    default: 20,
  },
})
const watermarkBg = props => {
  return computed(() => {
    const canvas = document.createElement('canvas')
    // 视口分辨率 确保当窗口大小变化时 画出的内容不模糊
    const devicePixelRatio = window.devicePixelRatio || 1
    const fontSize = props.fontSize * devicePixelRatio
    const font = fontSize + 'px serif'
    const ctx = canvas.getContext('2d')
    // 获取文字宽度
    ctx.font = font
    const { width } = ctx.measureText(props.text)
    const canvasSize = Math.max(100, width) + props.gap * devicePixelRatio
    canvas.width = canvasSize
    canvas.height = canvasSize
    ctx.translate(canvas.width / 2, canvas.height / 2)
    ctx.rotate((Math.PI / 180) * -45)
    ctx.fillStyle = 'rgba(0,0,0,0.3)'
    ctx.font = font
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(props.text, 0, 0)
    return {
      // 转换为base64格式的图片
      base64: canvas.toDataURL(),
      size: canvasSize / devicePixelRatio,
    }
  })
}
const bg = watermarkBg(props)

// 重置水印
// 如果把水印删掉了,就重新调用这个方法 生成一个新的div
// 如果把水印的样式改了,重新调用这个方法,生成一个新的div
// 因此这个函数可能会反复调用 造成多个水印的生成
let div = null
function resetWatermark() {
  if (!parent.value) return
  // 清除div防止生成多个水印
  if (div) {
    div.remove()
  }
  const { base64, size } = bg.value
  div = document.createElement('div')
  div.style.position = 'absolute'
  div.style.backgroundImage = `url(${base64})`
  div.style.backgroundSize = `${size}px ${size}px`
  div.style.backgroundRepeat = 'repeat'
  div.style.zIndex = 999
  // 实现点击穿透
  div.style.pointerEvents = 'none'
  div.style.inset = 0
  parent.value.appendChild(div)
}

// 生成水印的元素什么时候调用
// 1、onMounted的时候
onMounted(() => {
  // 首次生成水印
  resetWatermark()
  // 观察水印元素
  ob.observe(parent.value, {
    // 观察父元素上所有的子节点
    childList: true,
    // 观察父元素上所有的子节点的子节点
    subtree: true,
    // 观察父元素身上的属性变化
    attributes: true,
  })
})

// 2、当被删除或修改样式的时候
// 这个观察器在当元素发生变化的时候执行
const ob = new MutationObserver(entries => {
  for (const entry of entries) {
    // 处理删除
    for (const node of entry.removedNodes) {
      if (node === div) {
        resetWatermark()
      }
    }
    // 处理修改
    if (entry.target === div) {
      resetWatermark()
    }
  }
})

// 注意细节,在页面卸载的时候取消观察
onUnmounted(() => {
  ob.disconnect()
})
</script>

<style scoped lang="scss">
.watermark {
  position: relative;
}
</style>

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

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

相关文章

在linux服务器上安装anaconda

遇到问题&#xff1a; 在linux服务器中查看当前有哪些虚拟环境&#xff0c;conda环境用不了&#xff0c;anaconda没有安装&#xff0c;所以要在linux服务器中安装虚拟环境 解决步骤如下&#xff1a; 1.首先下载anaconda的Linux版本的安装包 方法1&#xff1a;官网下载&#…

python如何写入csv

在使用python对文件操作的过程中&#xff0c;你肯定碰到过对csv文件的操作&#xff0c;下面就python对csv文件的操作进行详述。 CSV&#xff08;Comma-Separated Values&#xff09;逗号分隔符&#xff0c;也就是每条记录中的值与值之间是用分号分隔的。 打开CSV文件并写入一…

卷积通用模型的剪枝、蒸馏---剪枝篇(此处以deeplabv3+为例,可根据模型自行定制剪枝层)

之后的两篇文章是对前段时间工作的一个总结。 一、环境配置 1.1、文章以b导的代码为模板,环境配置比较简单(第二篇蒸馏篇结束后会放置剪枝蒸馏配置好的百度网盘链接),其他算法自行配置,在剪枝之前,需要保证算法能够在本地跑通。 B导链接: https://github.com/bubbliiiin…

2024年 前端JavaScript 进阶 第4天 End 笔记

4.1-内容和浅拷贝 4.2-递归函数 4.3-深拷贝实现 4.4-利用lodash和JSON实现深 4.5-异常处理-throw和try、catch 4.6-普通函数和箭头函数的this 4.7-call方法改变this指向 4.8-apply方法 4.9-bind方法以及总结 4.10-什么是防抖以及底层实现 4.11-什么是节流以及底层实现 4.12-节流…

华为2024年校招实习硬件-结构工程师机试题(四套)

华为2024年校招&实习硬件-结构工程师机试题&#xff08;四套&#xff09; &#xff08;共四套&#xff09;获取&#xff08;WX: didadidadidida313&#xff0c;加我备注&#xff1a;CSDN 华为硬件结构题目&#xff0c;谢绝白嫖哈&#xff09; 结构设计工程师&#xff0c;结…

Shotcut:免费且开源的优质视频剪辑工具

Shotcut&#xff1a;您的专业级免费开源视频编辑利器&#xff0c;助您轻松实现创意无限的剪辑梦想&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Shotcut&#xff0c;一款广受赞誉的免费、开源跨平台视频编辑软件&#xff0c;以其卓越的功能性和易用性赢得了全球用户…

计算机视觉 | 基于二值图像数字矩阵的距离变换算法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本实验基于 OpenCV 实现了二值图像数字矩阵的距离变换算法。首先生成一个 480x480 的黑色背景图像&#xff08;定义黑色为0&#xff0c;白色为1&#xff09;&#xff0c;在其中随机选择了三个白色像素点作为距离变换的原点&…

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台:设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

HWOD:投票统计

一、知识点 1、单词 候选人的英文是Candidate 投票的英文是vote 投票人的英文是voter 2、for循环 如果在for循环内将i置为n&#xff0c;结束该层循环后&#xff0c;for循环会先给i加1,然后再去判读i是否小于n&#xff0c;所以for循环结束后&#xff0c;i的值为n1 3、字符…

LeetCode 239. 滑动窗口最大值

滑动窗口最大值 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,…

用html实现一个动态的文字框

<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>一个动态的文字框动画</title><link rel"stylesheet" href"./style.css"></head> <body> <link rel…

Centos7下docker的jenkins下载并配置jdk与maven【图文教程】

个人记录 进入目录 cd /usr/local/JDK下载与配置 OpenJDK官网 下载安装 wget https://download.java.net/openjdk/jdk18/ri/openjdk-1836_linux-x64_bin.tar.gz解压 tar -zxvf openjdk-1836_linux-x64_bin.tar.gz ls ls jdk-18/编辑配置文件 vim /etc/profile配置环境变…

[C++]让C++的opencv库支持写出h264格式视频

当我们写下面测试代码时候&#xff1a; #include <opencv2/opencv.hpp>int main() {cv::VideoCapture cap("E:\\car.mp4"); // 打开默认摄像头if (!cap.isOpened()) {std::cout << "读取完毕!" << std::endl;return -1;}double fps ca…

上线数日暴涨600%市值直逼节点猴,Runestone符石为何成第二大比特币NFT?

NodeMonkes&#xff08;节点猴&#xff09;市值超越BAYC成为第二大NFT之际&#xff0c;凭借着不断上涨的市场热度和人气&#xff0c;符文项目Runestone在空投数日后也成功跻身为比特币生态市值第二大NFT。Runestone高共识背后的动因有哪些&#xff1f;又有哪些策略具有借鉴意义…

Dubbo的使用和相关概念

参考官网 大致流程图 1. 初始化项目 参考官网进行项目的初始化即可。 2. 相关配置 主要参考官网&#xff1a;这里仅给出提示 application.yml dubbo:application:name: dubbo-springboot-demo-consumerprotocol:name: dubboport: -1registry:address: zookeeper://${zo…

考研数学|武忠祥各阶段用书搭配及分享

看到有人问武忠祥老师&#xff0c;不请自来 武忠祥老师&#xff0c;绝对的宝藏老师&#xff0c;我在考研强化阶段的时候听过他的强化课程&#xff0c;听完之后&#xff0c;很多问题都想通了&#xff0c;所以&#xff0c;如果有人想问武忠祥老师行不行&#xff0c;那我就一个字…

基于FPGA的以太网相关文章导航

首先需要了解以太网的一些接口协议标准&#xff0c;常见的MII、GMII、RGMII时序&#xff0c;便于后续开发。 【必读】从MII到RGMII&#xff0c;一文了解以太网PHY芯片不同传输接口信号时序&#xff01; 介绍一款比较老的以太网PHY芯片88E1518&#xff0c;具有RGMII接口&#xf…

代码学习记录40---动态规划

随想录日记part40 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.10 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及&#xff1a; 买卖股票的最佳时机加强版。 123.买卖股票的最佳时机III 188.买卖股票的最佳时机…

李廉洋:4.11黄金原油早盘#行情走势#分析及策略。

美国通胀数据超出预期&#xff0c;抑制了对美联储降息的押注。Coex Partners有限公司宏观经济学家Henrik Gullberg表示&#xff1a;“对新兴市场和风险资产来说&#xff0c;(通胀)高企持续时间更长是个坏消息&#xff0c;还因为它增加了美国和全球经济更明显下滑的风险。CPI数据…

代码随想录--数组--二分查找

数组理论基础 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 举一个字符数组的例子&#xff0c;如图所示&#xff1a; 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的。 正是因为数…