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>
https://i-blog.csdnimg.cn/direct/9a3eb9e645ba40df93743df763b97191.png
以上方法可以根据需求选择适合的方式实现水印效果。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]