快捷導(dǎo)航

vue+watermark-dom實現(xiàn)頁面水印效果(示例代碼)

更新時間：2024年07月21日 15:39:33 作者：水星記_

watermark.js 是基于 DOM 對象實現(xiàn)的 BS 系統(tǒng)的水印,確保系統(tǒng)保密性,安全性,降低數(shù)據(jù)泄密風(fēng)險,簡單輕量,支持多屬性配置,本文將通過 vue 結(jié)合 watermark-dom 庫,教大家實現(xiàn)簡單而有效的頁面水印效果,感興趣的朋友跟隨小編一起看看吧

前言

頁面水印大家應(yīng)該都不陌生，它可以用于驗證數(shù)字媒體的來源和完整性，還可以用于版權(quán)保護和信息識別，這些信息可以在不影響媒體質(zhì)量的情況下嵌入，‌并在需要時進行提取。‌本文將通過 vue 結(jié)合 watermark-dom 庫，教大家實現(xiàn)簡單而有效的頁面水印效果。

watermark-dom

watermark.js 是基于 DOM 對象實現(xiàn)的 BS 系統(tǒng)的水印，確保系統(tǒng)保密性，安全性，降低數(shù)據(jù)泄密風(fēng)險，簡單輕量，支持多屬性配置，動態(tài)計算水印，水印防被刪（監(jiān)聽水印組件元素刪除并重新添加，監(jiān)聽改變水印的屬性并重新添加）。

特性

多屬性配置，簡單易上手；
動態(tài)計算水?。?/li>
水印防被刪(監(jiān)聽水印組件元素刪除并重新添加，監(jiān)聽改變水印的屬性并重新添加)；
支持 2 種導(dǎo)入使用：本地引用，npm 引用；
水印測試工具：testTool 工具；
內(nèi)置 3 種全局 API 方法：init()，load(), remove()；
原理：pointer-events 事件穿透屬性，Shadow DOM(影子 DOM)，opacity 等。

一、安裝

npm install watermark-dom

二、引入

import watermark from 'watermark-dom'

三、內(nèi)置方法

1. watermark.init(setting)

這個方法用于初始化水印，可以設(shè)置水印的樣式、內(nèi)容和位置等參數(shù)。

栗子

watermark.init({
  watermark_txt: '測試水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
})

2. watermark.load(setting)

用于手動加載水印。

栗子

const options = {
  watermark_txt: '測試水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
}
watermark.load(options)

3. watermark.remove()

這個方法用于移除已加載的水印。

栗子

watermark.remove();

四、常用的屬性和配置

watermark_id: 'wm_div_id',          //水印總體的id
watermark_prefix: 'mask_div_id',    //小水印的id前綴
watermark_txt:"測試水印",            //水印的內(nèi)容
watermark_x:20,                     //水印起始位置x軸坐標
watermark_y:20,                     //水印起始位置Y軸坐標
watermark_rows:0,                   //水印行數(shù)
watermark_cols:0,                   //水印列數(shù)
watermark_x_space:100,              //水印x軸間隔
watermark_y_space:50,               //水印y軸間隔
watermark_font:'微軟雅黑',           //水印字體
watermark_color:'black',            //水印字體顏色
watermark_fontsize:'18px',          //水印字體大小
watermark_alpha:0.15,               //水印透明度，要求設(shè)置在大于等于0.005
watermark_width:100,                //水印寬度
watermark_height:100,               //水印長度
watermark_angle:15,                 //水印傾斜度數(shù)
watermark_parent_width:0,           //水印的總體寬度（默認值：body的scrollWidth和clientWidth的較大值）
watermark_parent_height:0,          //水印的總體高度（默認值：body的scrollHeight和clientHeight的較大值）
watermark_parent_node:null          //水印插件掛載的父元素element,不輸入則默認掛在body上

五、實例代碼

<template>
  <div style="height:100vh"></div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '測試水印內(nèi)容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
    }
    watermark.load(options)
  },
}
</script>

實現(xiàn)效果

六、非全屏展示

watermark_parent_node 屬性用于指定水印的父節(jié)點，即確定水印應(yīng)該顯示在哪個 DOM 元素的內(nèi)部。通過設(shè)置 watermark_parent_node 屬性，可以控制水印的顯示位置和范圍。例如，如果你想要將水印顯示在特定的 div 元素內(nèi)部，可以將該 div 元素作為 watermark_parent_node。這樣，水印將被限制在該 div 元素的范圍內(nèi)顯示。

<template>
  <div class="box">
    <div class="topBox"></div>
    <div id="watermarkId" class="cenBox"></div>
    <div class="bomBox"></div>
  </div>
</template>
<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '測試水印內(nèi)容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
      watermark_parent_node: 'watermarkId',
    }
    watermark.load(options)
  },
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100vh;
}
.topBox {
  height: 30vh;
  background: cadetblue;
}
.cenBox {
  height: 50vh;
}
.bomBox {
  height: 20vh;
  background: cornflowerblue;
}
</style>

實現(xiàn)效果