水印能够实现数据的追踪，在一定程度上保障数据的安全。
水印按区域划分分为两类，全局水印：（明水印，暗水印），局部水印（图片水印）。明水印是你能看见的水印，一般用在公司内部系统中，暗水印就是你看不见，但是经过特定的处理能看见的水印。（暗水印就不展示了）
明水印
图片水印
全局水印我使用的库是watermark-js-plus,安装命令 yarn add watermark-js-plus,在安装完成，引入watermark的时候报错了，这个是因为依赖没装好，导致引入的时候找不到文件，由于包管理工具我是用的是yarn，所以我删掉yarn.lock文件，重新执行 yarn install就可以了。有小伙伴用其他包管理工具的同样的将锁文件删掉，重新执行安装依赖的命令就可以了。
由于watermark-js-plus的图片水印功能，好像有一点问题（也有可能是我的问题），我使用之后，水印和原图片是分开，当生成水印之后，水印会将原图片替换掉，而不是水印和原图片一起生成一个新的src路径，我就上网找了找 ，然后自己重新写了一个图片水印功能。
图片水印
imageWaterMark.ts
// 实现图片水印功能
export async function imageWaterMark(url: string, text: string = 'hyr', color: string = 'red', fontSize: string = '30px') {
const img = document.createElement('img')
img.src = url
img.setAttribute('crossOrigin', 'anonymous') // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
await new Promise(resolve => (img.onload = resolve))
// 创建canvas DOM元素，并设置其宽高和图片一样
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext('2d')?.drawImage(img, 0, 0)
const ctx: any = canvas.getContext('2d')
// 设置字体颜色
ctx.fillStyle = color
// 设置字体大小
ctx.font = `${fontSize} Arial`
// 在画布上绘制文本和文本的位置
ctx.fillText(text, img.width - 70, img.height - 20)
const image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas.toDataURL('image/png')
return image
}
使用imageWaterMark.ts
import { imageWaterMark } from '@/utils/watermark'
const testWatermark = async (dom: HTMLImageElement) => {
const img: any = await imageWaterMark(dom.src, 'hyr', 'red', '30px')
// 查看效果
dom.src = img.src
}
onMounted(() => {
// 运行示例
const test: HTMLImageElement | any = document.querySelector('.test-image-dom')
testWatermark(test)
})
效果图
