1、演示

2、水印的目的

1. 版權(quán)保護(hù)：水印可以在圖片、文檔或視頻中嵌入作者、品牌或版權(quán)所有者的信息，以防止未經(jīng)授權(quán)的復(fù)制、傳播或使用。當(dāng)其他人使用帶有水印的內(nèi)容時(shí)，可以追溯到原始作者或版權(quán)所有者，從而加強(qiáng)版權(quán)保護(hù)。

2. 身份識(shí)別：水印可以用作作者或品牌的標(biāo)識(shí)符，使觀眾能夠輕松識(shí)別內(nèi)容的來源。這對(duì)于在社交媒體上分享內(nèi)容或在網(wǎng)絡(luò)上發(fā)布作品的個(gè)人、攝影師、設(shè)計(jì)師或公司來說尤為重要。

3. 品牌宣傳：水印可以幫助提升品牌知名度和曝光度。通過在圖片或視頻中添加品牌標(biāo)識(shí)，品牌可以在內(nèi)容被分享或傳播時(shí)獲得額外的宣傳效果。

4. 內(nèi)容跟蹤：通過在內(nèi)容中添加水印，可以跟蹤內(nèi)容的傳播和使用情況。這對(duì)于了解內(nèi)容在網(wǎng)絡(luò)上的傳播路徑、受眾和影響力等信息是有幫助的。

3、實(shí)話實(shí)說

如果通過我們技術(shù)層面要解決這種安全或者是版權(quán)之類的問題，只能說起一定的作用，增加那些不懷好意的人操作難度。

要說能夠完全防止住，那是不可能的，一定是技術(shù)手段和非技術(shù)手段相結(jié)合，雙管齊下。這樣才能確保萬(wàn)無(wú)一失。

總之：防君子不防小人

?4、API介紹（MutationObserver）

MutationObserver API 是 Web API 的一部分，用于監(jiān)視 DOM 樹的變化。它允許開發(fā)者注冊(cè)一個(gè)回調(diào)函數(shù)，該函數(shù)在指定的 DOM 節(jié)點(diǎn)或子樹發(fā)生變化時(shí)被調(diào)用。MutationObserver 是一個(gè)強(qiáng)大的工具，可以用于監(jiān)視并響應(yīng) DOM 中的變化，而無(wú)需使用傳統(tǒng)的事件監(jiān)聽器。

主要的組成部分包括：

1. MutationObserver 對(duì)象：用于觀察 DOM 樹的變化。通過創(chuàng)建 MutationObserver 的實(shí)例并傳入一個(gè)回調(diào)函數(shù)，可以開始監(jiān)視指定節(jié)點(diǎn)或節(jié)點(diǎn)集合的變化。

2. 觀察目標(biāo)：要監(jiān)視的 DOM 節(jié)點(diǎn)或節(jié)點(diǎn)集合。MutationObserver 可以觀察單個(gè)節(jié)點(diǎn)、節(jié)點(diǎn)列表，甚至整個(gè)文檔的變化。

3. 回調(diào)函數(shù)：MutationObserver 注冊(cè)的回調(diào)函數(shù)在觀察的節(jié)點(diǎn)發(fā)生變化時(shí)被調(diào)用?；卣{(diào)函數(shù)接收一個(gè) MutationRecord 對(duì)象數(shù)組作為參數(shù)，該數(shù)組包含描述每個(gè)變化的信息。

4. 變化記錄（MutationRecord）：描述 DOM 變化的對(duì)象。每個(gè) MutationRecord 包含有關(guān)變化類型、受影響的節(jié)點(diǎn)、以及相關(guān)信息的詳細(xì)信息。

MutationObserver API 的使用場(chǎng)景包括但不限于：

• 監(jiān)視 DOM 中特定元素的屬性變化。
• 監(jiān)視子節(jié)點(diǎn)的添加、移除或替換。
• 監(jiān)視文本內(nèi)容的變化。
• 實(shí)時(shí)監(jiān)視動(dòng)態(tài)加載的內(nèi)容變化。

通過 MutationObserver，開發(fā)者可以更加靈活地監(jiān)控 DOM 變化，實(shí)現(xiàn)更加復(fù)雜和高效的 DOM 操作和交互。

5、實(shí)現(xiàn)邏輯

1、通過手寫組件的方式，將需要添加水印的內(nèi)容放入組件內(nèi)

2、通過props傳入不同內(nèi)容，實(shí)現(xiàn)自定義水印內(nèi)容、字體大小、水印之間的間隔等等

3、通過canvas來畫出水印文字，最后將canvas畫出的內(nèi)容轉(zhuǎn)換為圖片

4、通過MutationObserverAPI來監(jiān)聽水印元素被刪除、被修改屬性的變化文章來源地址http://www.zghlxwxcb.cn/news/detail-854568.html

6、代碼

1、使用水印組件的代碼

<template>
  <div class="container">
    <Watermark text="版權(quán)所有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')
    // 視口分辨率 確保當(dāng)窗口大小變化時(shí) 畫出的內(nèi)容不模糊
    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 {
      // 轉(zhuǎn)換為base64格式的圖片
      base64: canvas.toDataURL(),
      size: canvasSize / devicePixelRatio,
    }
  })
}
const bg = watermarkBg(props)

// 重置水印
// 如果把水印刪掉了，就重新調(diào)用這個(gè)方法 生成一個(gè)新的div
// 如果把水印的樣式改了，重新調(diào)用這個(gè)方法，生成一個(gè)新的div
// 因此這個(gè)函數(shù)可能會(huì)反復(fù)調(diào)用 造成多個(gè)水印的生成
let div = null
function resetWatermark() {
  if (!parent.value) return
  // 清除div防止生成多個(gè)水印
  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
  // 實(shí)現(xiàn)點(diǎn)擊穿透
  div.style.pointerEvents = 'none'
  div.style.inset = 0
  parent.value.appendChild(div)
}

// 生成水印的元素什么時(shí)候調(diào)用
// 1、onMounted的時(shí)候
onMounted(() => {
  // 首次生成水印
  resetWatermark()
  // 觀察水印元素
  ob.observe(parent.value, {
    // 觀察父元素上所有的子節(jié)點(diǎn)
    childList: true,
    // 觀察父元素上所有的子節(jié)點(diǎn)的子節(jié)點(diǎn)
    subtree: true,
    // 觀察父元素身上的屬性變化
    attributes: true,
  })
})

// 2、當(dāng)被刪除或修改樣式的時(shí)候
// 這個(gè)觀察器在當(dāng)元素發(fā)生變化的時(shí)候執(zhí)行
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()
    }
  }
})

// 注意細(xì)節(jié)，在頁(yè)面卸載的時(shí)候取消觀察
onUnmounted(() => {
  ob.disconnect()
})
</script>

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

到了這里，關(guān)于前端開發(fā)攻略---Vue實(shí)現(xiàn)防篡改水印的效果。刪除元素?zé)o效！更改元素屬性無(wú)效！支持圖片、元素、視頻等等。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！