vue3 实现前端生成水印效果

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

编写水印组件

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

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

可以接受四个参数，如果不够可以自己加，分别是 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();

// 转换为 base64

const 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就可以了：

效果

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