Vue3【水印功能】

鼓浪屿
127 阅读5分钟

*如果是React开发，这个功能在Ant Design中就有，但是Vue开发Elementui和Ant DesignVue没有这个组件。参考# MutationObserver在页面水印实现起到的作用详解：*实现思路如下：

  • 1、如何生成水印？

    在区域加一个div，加一个背景图(使用canvas来画图)在repeat加重复属性，通过定位覆盖到div上。具体实现在img.js文件中，通过计算属性，然后创建一个canvas(createElement)，设置字体大小，把文字通过fillText()方法画到画布上去，可以设置旋转的画布，字体就斜体了。

  • 2、如何防止篡改？

    通过MutationObserver监听DOM的变化，通过 childList: true（ 观察目标子节点的变化，是否有添加或者删除）；attributes: true（观察属性变动），subtree: true （观察后代节点，默认为 false）。具体实现在Watermark.vue文件中，设置样式在style内联在组件中，使用watchEffect来监听，里面设置内联样式(动态生成div且不用class去设置样式)，防止在调试工具修改在MutationObserver的回调函数中，通过里面的observer设置参数即监听的对象（监听不到class样式表所以采用内联样式），在回调函数加入设置水印的方法，当我们在控制台中删除节点时，方法中当前元素div跟遍历移除的dom元素做对比，如果相等，就会重新执行生成这个canvas的方法；那么在控制台修改内联样式时，通过当前元素div跟遍历出修改的dom做对比，如果相等就会监听到修改了，重新执行生成canvas的方法。所以，当在控制台删除dom节点或者修改内联样式都会先移除这个canvas再迅速生成一个，dom节点会快速更新，使其不能更改。 img.js文件

import { computed } from "vue";
// 计算属性，创建一个canvas
export default function unseWatermarkBg(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");
        // 获取文字宽度
        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: canvas.toDataURL(),
            size: canvasSize,
            styleSize: canvas / devicePixelRatio,
        };
    });
}

Watermark.vue文件

<template>
    <div class="watermark-contaner" ref="parentRef">
        <slot></slot>
    </div>
</template>

<script setup>
import unseWatermarkBg from './img'
    const props = defineProps({
        text:{
            type:String,
            required:true,
            default:'watermark'
        },
        fontSize:{
            type:Number,
            default:40
        },
        gap:{
            type:Number,
            default:20
        }
    })
    const bg = unseWatermarkBg(props)
    const{ base64, styleSize} = bg.value
    console.log(bg.value,'bg.value');
    const parentRef = ref(null)
    let div
    const flag = ref(0)
    watchEffect(()=>{
        flag.value
        if(!parentRef.value){
            return
        }
        if(div){
            div.remove()
        }
        div = document.createElement('div')
        // 内联元素防篡改
        div.style.backgroundImage = `url(${base64})`
        div.style.backgroundSize = `${styleSize}px ${styleSize}px`
        div.style.backgroundRepeat = 'repeat'
        div.style.width='100%'
        div.style.height='100%'
        div.style.zIndex = 9999
        div.style.position ='absolute'
        div.style.inset = 0
        parentRef.value.appendChild(div)
    })
    let ob;
    // 监控手动删除的操作
    onMounted(() => {
        ob = new MutationObserver((records)=>{
            for (const record of records) {
              for (const dom of record.removedNodes) {
                // 监控到了删除，div是当前元素，而dom是遍历移除的dom元素
                if(dom ===div){
                    flag.value++
                    return
                    console.log('sanshussss');
                }
              }
              if(record.target ===div){
                // record.target是修改的dom元素
                flag.value++
                return
              }
            }
            console.log('records',records);
            // flag.value++
        })
        ob.observe(parentRef.value,{
            childList:true,
            attributes:true,
            subtree:true
        })
    })
    onUnmounted(() => {
        ob && ob.disconnect() // 取消监听
        div = null
    })
</script>

<style></style>

index.vue文件

<template>
    <div class="container">
        <Watermark text="禁止转载" fontSize="18">
            <img src="@/assets/images/logo.png" alt="">
        </Watermark>
    </div>
</template>
<script setup>
import Watermark from './Watermark.vue'
// watermark
// vue 中elementui和andesing没有这个水印组件

</script>

<style></style>

看看github大佬的水印js方法：

/**
 * 提取自 watermark-dom
 * https://github.com/saucxs/watermark-dom
 */

var watermark = {}

var forceRemove = false

var defaultSettings = {
    watermark_id: 'wm_div_id', // 水印总体的id
    watermark_prefix: 'mask_div_id', // 小水印的id前缀
    watermark_txt: '测试水印', // 水印的内容
    watermark_x: 20, // 水印起始位置x轴坐标
    watermark_y: 20, // 水印起始位置Y轴坐标
    watermark_rows: 0, // 水印行数
    watermark_cols: 0, // 水印列数
    watermark_x_space: 50, // 水印x轴间隔
    watermark_y_space: 50, // 水印y轴间隔
    watermark_font: '微软雅黑', // 水印字体
    watermark_color: 'black', // 水印字体颜色
    watermark_fontsize: '18px', // 水印字体大小
    watermark_alpha: 0.15, // 水印透明度，要求设置在大于等于0.005
    watermark_width: 100, // 水印宽度
    watermark_height: 100, // 水印长度
    watermark_angle: 15, // 水印倾斜度数
    watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
    watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
    watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
    monitor: true // monitor 是否监控， true: 不可删除水印; false: 可删水印。
}

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

// 监听dom是否被移除或者改变属性的回调函数
var domChangeCallback = function(records) {
    if (forceRemove) {
        forceRemove = false
        return
    }
    if (
        (globalSetting && records.length === 1) ||
        (records.length === 1 && records[0].removedNodes.length >= 1)
    ) {
        loadMark(globalSetting)
    }
}

var hasObserver = MutationObserver !== undefined
var watermarkDom = hasObserver
    ? new MutationObserver(domChangeCallback)
    : null
var option = {
    childList: true,
    attributes: true,
    subtree: true
}

/* 加载水印*/
var loadMark = function(settings) {
    /* 采用配置项替换默认值，作用类似jquery.extend*/
    if (arguments.length === 1 && typeof arguments[0] === 'object') {
        var src = arguments[0] || {}
        for (let key in src) {
            if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) {
                continue
            } else if (src[key] || src[key] === 0) {
                /* veronic: resolution of watermark_angle=0 not in force*/
                defaultSettings[key] = src[key]
            }
        }
    }

    /* 如果元素存在则移除*/
    var watermark_element = document.getElementById(
        defaultSettings.watermark_id
    )
    watermark_element &&
        watermark_element.parentNode &&
        watermark_element.parentNode.removeChild(watermark_element)

    /* 如果设置水印挂载的父元素的id*/
    var watermark_parent_element = document.getElementById(
        defaultSettings.watermark_parent_node
    )
    var watermark_hook_element = watermark_parent_element || document.body

    /* 获取页面宽度*/
    var page_width = Math.max(watermark_hook_element.scrollWidth, watermark_hook_element.clientWidth)
    /* 获取页面最大长度*/
    var page_height = Math.max(watermark_hook_element.scrollHeight, watermark_hook_element.clientHeight)

    var setting = arguments[0] || {}
    var parentEle = watermark_hook_element

    var page_offsetTop = 0
    var page_offsetLeft = 0
    if (setting.watermark_parent_width || setting.watermark_parent_height) {
        /* 指定父元素同时指定了宽或高*/
        if (parentEle) {
            page_offsetTop = parentEle.offsetTop || 0
            page_offsetLeft = parentEle.offsetLeft || 0
            defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft
            defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop
        }
    } else {
        if (parentEle) {
            page_offsetTop = parentEle.offsetTop || 0
            page_offsetLeft = parentEle.offsetLeft || 0
        }
    }

    /* 创建水印外壳div*/
    var otdiv = document.getElementById(defaultSettings.watermark_id)
    var shadowRoot = null

    if (!otdiv) {
        otdiv = document.createElement('div')
        /* 创建shadow dom*/
        otdiv.id = defaultSettings.watermark_id
        otdiv.setAttribute('style', 'pointer-events: none !important; display: block !important')
        /* 判断浏览器是否支持attachShadow方法*/
        if (typeof otdiv.attachShadow === 'function') {
            /* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
            shadowRoot = otdiv.attachShadow({ mode: 'open' })
        } else {
            shadowRoot = otdiv
        }
        /* 将shadow dom随机插入body内的任意位置*/
        var nodeList = watermark_hook_element.children
        var index = Math.floor(Math.random() * (nodeList.length - 1))
        if (nodeList[index]) {
            watermark_hook_element.insertBefore(otdiv, nodeList[index])
        } else {
            watermark_hook_element.appendChild(otdiv)
        }
    } else if (otdiv.shadowRoot) {
        shadowRoot = otdiv.shadowRoot
    }
    /* 三种情况下会重新计算水印列数和x方向水印间隔：1、水印列数设置为0，2、水印宽度大于页面宽度，3、水印宽度小于于页面宽度*/
    defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space))
    var temp_watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols))
    defaultSettings.watermark_x_space = temp_watermark_x_space ? defaultSettings.watermark_x_space : temp_watermark_x_space
    var allWatermarkWidth

    /* 三种情况下会重新计算水印行数和y方向水印间隔：1、水印行数设置为0，2、水印长度大于页面长度，3、水印长度小于于页面长度*/
    defaultSettings.watermark_rows = parseInt((page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space))
    var temp_watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows))
    defaultSettings.watermark_y_space = temp_watermark_y_space ? defaultSettings.watermark_y_space : temp_watermark_y_space
    var allWatermarkHeight

    if (watermark_parent_element) {
        allWatermarkWidth = defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
        allWatermarkHeight = defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
    } else {
        allWatermarkWidth = page_offsetLeft + defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
        allWatermarkHeight = page_offsetTop + defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
    }

    var x
    var y
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
        if (watermark_parent_element) {
            y = page_offsetTop + defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
        } else {
            y = defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
        }
        for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            if (watermark_parent_element) {
                x = page_offsetLeft + defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
            } else {
                x = defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
            }
            var mask_div = document.createElement('div')
            var oText = document.createTextNode(defaultSettings.watermark_txt)
            mask_div.appendChild(oText)
            /* 设置水印相关属性start*/
            mask_div.id = defaultSettings.watermark_prefix + i + j
            /* 设置水印div倾斜显示*/
            mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
            mask_div.style.visibility = ''
            mask_div.style.position = 'absolute'
            /* 选不中*/
            mask_div.style.left = x + 'px'
            mask_div.style.top = y + 'px'
            mask_div.style.overflow = 'hidden'
            mask_div.style.zIndex = '9999999'
            mask_div.style.opacity = defaultSettings.watermark_alpha
            mask_div.style.fontSize = defaultSettings.watermark_fontsize
            mask_div.style.fontFamily = defaultSettings.watermark_font
            mask_div.style.color = defaultSettings.watermark_color
            mask_div.style.textAlign = 'center'
            mask_div.style.width = defaultSettings.watermark_width + 'px'
            mask_div.style.height = defaultSettings.watermark_height + 'px'
            mask_div.style.display = 'block'
            mask_div.style['-ms-user-select'] = 'none'
            /* 设置水印相关属性end*/
            shadowRoot.appendChild(mask_div)
        }
    }

    // monitor 是否监控， true: 不可删除水印; false: 可删水印。
    const minotor = settings.monitor === undefined ? defaultSettings.monitor : settings.monitor
    if (minotor && hasObserver) {
        watermarkDom.observe(watermark_hook_element, option)
        watermarkDom.observe(document.getElementById(defaultSettings.watermark_id).shadowRoot, option)
    }
}

/* 移除水印*/
var removeMark = function() {
    /* 采用配置项替换默认值，作用类似jquery.extend*/
    if (arguments.length === 1 && typeof arguments[0] === 'object') {
        var src = arguments[0] || {}
        for (let key in src) {
            if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
            /* veronic: resolution of watermark_angle=0 not in force*/
            else if (src[key] || src[key] === 0) defaultSettings[key] = src[key]
        }
    }

    /* 移除水印*/
    var watermark_element = document.getElementById(defaultSettings.watermark_id)
    var _parentElement = watermark_element.parentNode
    _parentElement.removeChild(watermark_element)
    // :ambulance: remove()
    // minotor 这个配置有些冗余
    // 如果用 MutationObserver 来监听dom变化防止删除水印
    // remove() 方法里用 MutationObserver 的 disconnect() 解除监听即可
    watermarkDom.disconnect()
}

var globalSetting
/* 初始化水印，添加load和resize事件*/
watermark.init = function(settings) {
    globalSetting = settings
    loadMark(settings)
    window.addEventListener('onload', function() {
        loadMark(settings)
    })
    window.addEventListener('resize', function() {
        loadMark(settings)
    })
}

/* 手动加载水印*/
watermark.load = function(settings) {
    globalSetting = settings
    loadMark(settings)
}

/* 手动移除水印*/
watermark.remove = function() {
    forceRemove = true
    removeMark()
}

// 监听dom是否被移除或者改变属性的回调函数
var callback = function(records) {
    var watermark_parent_element = document.getElementById(
        defaultSettings.watermark_parent_node
    )
    var watermark_hook_element = watermark_parent_element || document.body
    var watermark_element = document.getElementById(
        defaultSettings.watermark_id
    )
    if (watermark_element === records[0].target || watermark_hook_element === records[0].target) {
        if (
            (globalSetting && records.length === 1) ||
            (records.length === 1 && records[0].removedNodes.length >= 1)
        ) {
            loadMark(globalSetting)
            return
        }
    }

    // 监听父节点的尺寸是否发生了变化, 如果发生改变, 则进行重新绘制
    // var watermark_parent_element = document.getElementById(defaultSettings.watermark_parent_node)
    if (watermark_parent_element) {
        var newWidth = getComputedStyle(watermark_parent_element).getPropertyValue('width')
        var newHeight = getComputedStyle(watermark_parent_element).getPropertyValue('height')
        if (newWidth !== recordOldValue.width || newHeight !== recordOldValue.height) {
            recordOldValue.width = newWidth
            recordOldValue.height = newHeight
            loadMark(globalSetting)
        }
    }
}
watermarkDom = new MutationObserver(callback)
option = {
    childList: true,
    attributes: true,
    subtree: true,
    attributeFilter: ['style'],
    attributeOldValue: true
}
var recordOldValue = {
    width: 0,
    height: 0
}

export default watermark

所以我的水印功能有优化的点：

  1. z-index层级问题（比如样式覆盖了按钮，pointer-events: none;）
  2. 水印只是覆盖操作，并不是在源信息修改
  3. 前端：svg方式类似（都是明水印）；后端：数据库水印算法（实现暗水印，在数据中加入隐藏标记）
  4. 水印可拓展其他css属性、加入resize事件、扩大水印的范围使水印覆盖到整个body上而不是组件区域，使的功能更完善等，或者绑定到自定义指令中
avatar
文章
阅读
粉丝
相关推荐
Vue3 实现网页背景水印功能
3.8k阅读
 · 
32点赞
前端水印生成方案(网页水印+图片水印)
34k阅读
 · 
531点赞
vue 图片添加水印
5.5k阅读
 · 
17点赞
Vue之全局水印
4.7k阅读
 · 
13点赞
文字水印 vue
1.6k阅读
 · 
7点赞
前端水印实现方案
32k阅读
 · 
536点赞
Android 添加水印功能
9.2k阅读
 · 
45点赞
使用 Vue 实现防篡改的水印
7.7k阅读
 · 
135点赞
利用Vue3指令详细实现水印背景！
3.8k阅读
 · 
55点赞
你知道前端水印功能是怎么实现的吗？
45k阅读
 · 
690点赞

友情链接：