采用canvas繪制圖片，observe監聽頁面元素改變重新添加。
實現一個這種水印：

<template><div id="water_mater" ref="Watermakr"></div> </template><script> export default {data() {return {}},methods: {createWaterMark() {const { loginIp = '', userName = '' } = this.userProfileconst angle = -22const txt = `水印內容`const canvas = document.createElement('canvas')canvas.width = 500canvas.height = 240const ctx = canvas.getContext('2d')ctx.clearRect(0, 0, 500, 240)ctx.fillStyle = '#000'ctx.globalAlpha = 0.3ctx.font = `14px serif`ctx.rotate((Math.PI / 180) * angle)ctx.fillText(txt, 90, 150)return canvas.toDataURL()},watchRemove() {const Watermakr = this.$refs.Watermakr// 觀察器的配置（需要觀察什么變動）const config = { attributes: true, childList: true, subtree: true }// 當觀察到變動時執行的回調函數const callback = function(mutationsList, observer) {// 獲取父組件 IDconst parentDom = document.getElementById('mainBox')// Use traditional 'for loops' for IE 11for (const mutation of mutationsList) {mutation.removedNodes.forEach(function(item) {if (item === Watermakr) {if (!document.getElementById('water_mater')) {parentDom.appendChild(Watermakr)}}})}}// 監聽元素const targetNode = document.getElementById('mainBox')// 創建一個觀察器實例并傳入回調函數const observer = new MutationObserver(callback)// 以上述配置開始觀察目標節點observer.observe(targetNode, config)}},mounted() {const Watermakr = this.$refs.WatermakrWatermakr.style.background= `url(${this.createWaterMark()}) center top`this.watchRemove()} } </script><style lang="scss" scoped> #water_mater {width: 100%;height: 100%;position: absolute; // 父組件要用相對定位 或者直接子組件固定定位，看需求top: 0px;right: 0px;bottom: 0px;left: 0px;pointer-events: none;background-repeat: repeat;z-index: 10; } </style>

更多請參考：
從破解某設計網站談前端水印(詳細教程)

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的web页面--前端明水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。