vue3 实现前端生成水印效果

vue3 实现前端生成水印效果

首先一点哈，就是单纯web前端生成水印只能作为警示使用，如果享彻底防住几乎是不可能的，有无数种方式去掉web前端生成的水印，所以这种方式只当是一个君子协议吧。

编写水印组件

首先直接把这部分封装成一个组件吧，我这边直接上代码了。

创建一个 waterMark.vue 文件，用来编写水印组件：

<template><div class="watermark-container" ref="parentRef"><slot></slot></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import useWaterMarkBg from './waterMarkBg';
const props = defineProps({text: {type: String,default: "版权所有"},fontSize: {type: Number,default: 25,},gap: {type: Number,default: 20,},color: {type: String,default: 'rgba(201, 35, 35, 0.5)'}
})let div;
const bg = useWaterMarkBg(props);
const parentRef = ref();const ob = new MutationObserver((entries) => {for (const entry of entries) {for (const node of entry.removedNodes) {if (node === div) {resetWatermark();return;}}if (entry.target === div) {resetWatermark();}}
})onMounted(() => {resetWatermark();ob.observe(parentRef.value, {childList: true,subtree: true,attributes: true,})
})onUnmounted(() => {ob.disconnect();
})// 重置水印
const resetWatermark = () => {if (!parentRef.value) { return }if (div) {div.remove();}const { base64, size } = bg.value.value;div = document.createElement('div');div.style.position = 'absolute';div.style.backgroundImage = `url(${base64})`;div.style.backgroundSize = `${size.width}px ${size.height}px`;div.style.backgroundRepeat = "repeat";div.style.pointerEvents = 'none';div.style.zIndex = '9999';div.style.inset = 0;parentRef.value.appendChild(div);
}</script>
<style scoped lang="scss">
.watermark-container {position: relative;
}
</style>

可以接受四个参数，如果不够可以自己加，分别是 text 水印文本内容、fontSize 水印文本大小、gap 水印文本间隔、color 水印文本颜色。

然后在水印组件加载完成的时候调用 resetWatermark 重置水印方法实现添加水印。

水印是动态生成的图片，最后创建了一个动态的div加上页面的，因为还想尽可能的防止一下水印删除，所以说在中途检测了一下dom修改情况，如果修改了，比如删除了div，或者是修改了div的样式，那么就重置水印，重新添加一遍。

其中在组件中还是用了 useWaterMarkBg 方法，下面代码是 waterMarkBg.js 文件的内容，可以根据自己的业务需求适当的修改：

import { ref, computed } from 'vue';/*** 创建水印背景图片的 composable 函数* @param {Object} options - 水印配置选项* @param {string} options.text - 水印文字内容* @param {number} options.fontSize - 字体大小* @param {number} options.gap - 水印间隔* @param {string} options.color - 文字颜色，默认为半透明灰色* @param {number} options.rotate - 旋转角度，默认为 -15 度* @param {string} options.fontFamily - 字体，默认为 Arial* @returns {Object} 返回包含 base64 和 size 的响应式对象*/
function useWaterMarkBg(options = {}) {// 默认参数const defaultOptions = {text: '版权所有',fontSize: 25,gap: 20,color: 'rgba(201, 35, 35, 0.5)',rotate: -15,fontFamily: 'Arial, sans-serif'};// 合并用户参数和默认参数const waterMarkOptions = ref({ ...defaultOptions, ...options });// 计算水印尺寸和 base64 图片const waterMarkInfo = computed(() => {const { text, fontSize, gap, color, rotate, fontFamily } = waterMarkOptions.value;// 创建 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');if (!ctx) {throw new Error('无法获取 canvas 上下文');}// 设置字体ctx.font = `${fontSize}px ${fontFamily}`;// 获取文字宽度const textWidth = ctx.measureText(text).width;// 计算 canvas 尺寸（包含文字和间隙）const width = textWidth + gap * 2;const height = fontSize * 2 + gap * 2;canvas.width = width;canvas.height = height;// 重置上下文（因为 canvas 尺寸改变了）ctx.font = `${fontSize}px ${fontFamily}`;ctx.fillStyle = color;ctx.textAlign = 'center';ctx.textBaseline = 'middle';// 保存当前状态ctx.save();// 移动到 canvas 中心并旋转ctx.translate(width / 2, height / 2);ctx.rotate((Math.PI / 180) * rotate);// 绘制文字ctx.fillText(text, 0, 0);// 恢复之前的状态ctx.restore();// 转换为 base64const base64 = canvas.toDataURL('image/png');return {base64,size: {width,height}};});// 如果传入的 options 发生变化，可以更新水印function updateOptions(newOptions) {waterMarkOptions.value = { ...waterMarkOptions.value, ...newOptions };}return {value: waterMarkInfo,updateOptions};
}export default useWaterMarkBg;

水印组件的使用

使用的时候就很简单了，引入一下，然后包裹一下需要添加水印的dom就可以了：

    <!-- 默认红色水印 --><water-mark text="严禁传播"><div class="img-con"><img src="../../assets/imgs/watermark/1.jpg" alt="图片1"></div></water-mark><!-- 蓝色水印 --><water-mark text="禁止复制" :fontSize="25" color="rgba(30, 144, 255, 0.3)"><div class="img-con"><img src="../../assets/imgs/watermark/2.jpg" alt="图片2"></div></water-mark><!-- 绿色水印 --><water-mark text="测试水印" :fontSize="25" color="rgba(50, 205, 50, 0.4)"><div class="img-con"><img src="../../assets/imgs/watermark/1.jpg" alt="图片3"></div></water-mark>

效果

好了，大体就这个样子，还是，水印这个很容易删除，懂得人，删的很快，最好从源头解决，只要后端返回前端的是原文件，那么就可以从浏览器获取到没有水印的内容。