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

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

---

方法一：使用 CSS

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

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

示例代码

1. <template>
2.   <div class="watermark-container">
3.     <p>这是带水印的内容。</p>
4.   </div>
5. </template>
7. <style>
8. .watermark-container {
9.   position: relative;
10.   width: 100%;
11.   height: 200px;
12.   background-color: #f0f0f0;
13.   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>');
14.   background-repeat: repeat;
15. }
16. </style>

复制代码

---

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

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

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

示例代码

1. <template>
2.   <div class="watermark-container" :style="{ backgroundImage: watermark }">
3.     <p>这是带水印的内容。</p>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   data() {
10.     return {
11.       watermark: '',
12.     };
13.   },
14.   mounted() {
15.     this.generateWatermark();
16.   },
17.   methods: {
18.     generateWatermark() {
19.       const canvas = document.createElement('canvas');
20.       const ctx = canvas.getContext('2d');
22.       canvas.width = 200;
23.       canvas.height = 200;
25.       ctx.font = '20px Arial';
26.       ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
27.       ctx.textAlign = 'center';
28.       ctx.textBaseline = 'middle';
29.       ctx.translate(100, 100);
30.       ctx.rotate((-45 * Math.PI) / 180);
31.       ctx.fillText('Watermark', 0, 0);
33.       this.watermark = `url(${canvas.toDataURL('image/png')})`;
34.     },
35.   },
36. };
37. </script>
39. <style>
40. .watermark-container {
41.   position: relative;
42.   width: 100%;
43.   height: 200px;
44.   background-repeat: repeat;
45. }
46. </style>

复制代码

---

方法三：封装水印组件

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

1. <template>
2.   <div class="watermark" :style="{ backgroundImage: watermark }">
3.     <slot></slot>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   props: {
10.     text: {
11.       type: String,
12.       default: 'Watermark',
13.     },
14.     fontSize: {
15.       type: String,
16.       default: '20px',
17.     },
18.     color: {
19.       type: String,
20.       default: 'rgba(0, 0, 0, 0.2)',
21.     },
22.     rotate: {
23.       type: Number,
24.       default: -45,
25.     },
26.   },
27.   data() {
28.     return {
29.       watermark: '',
30.     };
31.   },
32.   mounted() {
33.     this.generateWatermark();
34.   },
35.   methods: {
36.     generateWatermark() {
37.       const canvas = document.createElement('canvas');
38.       const ctx = canvas.getContext('2d');
40.       canvas.width = 200;
41.       canvas.height = 200;
43.       ctx.font = `${this.fontSize} Arial`;
44.       ctx.fillStyle = this.color;
45.       ctx.textAlign = 'center';
46.       ctx.textBaseline = 'middle';
47.       ctx.translate(100, 100);
48.       ctx.rotate((this.rotate * Math.PI) / 180);
49.       ctx.fillText(this.text, 0, 0);
51.       this.watermark = `url(${canvas.toDataURL('image/png')})`;
52.     },
53.   },
54. };
55. </script>
57. <style>
58. .watermark {
59.   position: relative;
60.   width: 100%;
61.   height: 100%;
62.   background-repeat: repeat;
63. }
64. </style>

复制代码

使用：

1. <template>
2.   <div>
3.     <Watermark text="Confidential" color="rgba(255,0,0,0.1)">
4.       <p>这是机密内容。</p>
5.     </Watermark>
6.   </div>
7. </template>
9. <script>
10. import Watermark from './Watermark.vue';
12. export default {
13.   components: {
14.     Watermark,
15.   },
16. };
17. </script>

复制代码

---

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。