vue结合canvas动态生成水印效果

在 Vue 项目中添加水印可以通过以下几种方式实现：

---

方法一：使用 CSS

直接通过 CSS 的 background 属性实现水印：

实现步骤

1. 在需要添加水印的容器中设置背景。
2. 使用 rgba 设置透明度，并通过 background-repeat 和 background-size 实现重复。

示例代码

<template><div class="watermark-container"><p>这是带水印的内容。</p></div>
</template><style>
.watermark-container {position: relative;width: 100%;height: 200px;background-color: #f0f0f0;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="20" y="100" font-size="20" fill="rgba(0,0,0,0.2)" transform="rotate(-45)">Watermark</text></svg>');background-repeat: repeat;
}
</style>

---

方法二：通过 Canvas 动态生成水印

使用 Canvas 动态生成水印，并将其作为背景图应用。

实现步骤

1. 在 Vue 中创建一个方法，通过 canvas 动态生成水印图。
2. 将生成的图像作为背景图应用到需要添加水印的元素上。

示例代码

<template><div class="watermark-container" :style="{ backgroundImage: watermark }"><p>这是带水印的内容。</p></div>
</template><script>
export default {data() {return {watermark: '',};},mounted() {this.generateWatermark();},methods: {generateWatermark() {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = 200;canvas.height = 200;ctx.font = '20px Arial';ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.translate(100, 100);ctx.rotate((-45 * Math.PI) / 180);ctx.fillText('Watermark', 0, 0);this.watermark = `url(${canvas.toDataURL('image/png')})`;},},
};
</script><style>
.watermark-container {position: relative;width: 100%;height: 200px;background-repeat: repeat;
}
</style>

---

方法三：封装水印组件

如果需要复用，可以封装一个通用的水印组件。

示例代码

<template><div class="watermark" :style="{ backgroundImage: watermark }"><slot></slot></div>
</template><script>
export default {props: {text: {type: String,default: 'Watermark',},fontSize: {type: String,default: '20px',},color: {type: String,default: 'rgba(0, 0, 0, 0.2)',},rotate: {type: Number,default: -45,},},data() {return {watermark: '',};},mounted() {this.generateWatermark();},methods: {generateWatermark() {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = 200;canvas.height = 200;ctx.font = `${this.fontSize} Arial`;ctx.fillStyle = this.color;ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.translate(100, 100);ctx.rotate((this.rotate * Math.PI) / 180);ctx.fillText(this.text, 0, 0);this.watermark = `url(${canvas.toDataURL('image/png')})`;},},
};
</script><style>
.watermark {position: relative;width: 100%;height: 100%;background-repeat: repeat;
}
</style>

使用：

<template><div><Watermark text="Confidential" color="rgba(255,0,0,0.1)"><p>这是机密内容。</p></Watermark></div>
</template><script>
import Watermark from './Watermark.vue';export default {components: {Watermark,},
};
</script>

---

以上方法可以根据需求选择适合的方式实现水印效果。