vue结合canvas动态生成水印效果
在 Vue 项目中添加水印可以通过以下几种方式实现：
方法一：使用 CSS
直接通过 CSS 的 background 属性实现水印：
实现步骤
- 在需要添加水印的容器中设置背景。
- 使用
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 动态生成水印，并将其作为背景图应用。
实现步骤
- 在 Vue 中创建一个方法，通过
canvas动态生成水印图。 - 将生成的图像作为背景图应用到需要添加水印的元素上。
示例代码
<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>
以上方法可以根据需求选择适合的方式实现水印效果。