Vue实现页面添加满屏水印和去除水印功能

更新时间：2024年07月17日 10:14:25 作者：前端小助手

在一些特殊的应用场景中,可能需要在网页上添加水印以保护版权或标识信息,本文将介绍如何在Vue项目中添加满屏水印并实现去除水印的功能,文中通过代码示例讲解的非常详细,需要的朋友可以参考下

1. 前言

在一些特殊的应用场景中，可能需要在网页上添加水印以保护版权或标识信息。本文将介绍如何在Vue项目中添加满屏水印并实现去除水印的功能。

2. 添加满屏水印

2.1 创建水印组件

首先，我们需要创建一个水印组件，该组件会在页面上生成一个满屏的水印。

<!-- Watermark.vue -->
<template>
  <div class="watermark" ref="watermark"></div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.addWatermark(this.text);
  },
  methods: {
    addWatermark(text) {
      const watermarkDiv = this.$refs.watermark;
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;

      const ctx = canvas.getContext('2d');
      ctx.rotate(-20 * Math.PI / 180);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.50)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = 0;
      watermarkDiv.style.left = 0;
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.zIndex = 9999;
    }
  }
};
</script>

<style scoped>
.watermark {
  background-repeat: repeat;
}
</style>

2.2 在页面中使用水印组件

将水印组件引入到需要添加水印的页面，并在模板中使用。

<template>
  <div>
    <Watermark text="这是一个水印"></Watermark>
    <!-- 你的其他页面内容 -->
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';

export default {
  components: {
    Watermark
  }
};
</script>

示例效果

3. 去除水印

为了去除水印，我们可以使用一个简单的方法来控制水印组件的显示和隐藏。

3.1 修改Watermark组件以支持动态显示

在水印组件中添加一个v-if指令，以便动态控制其显示和隐藏。

<!-- Watermark.vue -->
<template>
  <div class="watermark" v-if="visible" ref="watermark"></div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.addWatermark(this.text);
  },
  methods: {
    addWatermark(text) {
      const watermarkDiv = this.$refs.watermark;
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;

      const ctx = canvas.getContext('2d');
      ctx.rotate(-20 * Math.PI / 180);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.50)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = 0;
      watermarkDiv.style.left = 0;
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.zIndex = 9999;
    }
  }
};
</script>

3.2 动态控制水印显示

在页面中通过数据绑定控制水印的显示和隐藏。

<template>
  <div>
    <button @click="toggleWatermark">切换水印</button>
    <Watermark :text="watermarkText" :visible="watermarkVisible"></Watermark>
    <!-- 你的其他页面内容 -->
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';

export default {
  components: {
    Watermark
  },
  data() {
    return {
      watermarkText: '这是一个水印',
      watermarkVisible: true
    };
  },
  methods: {
    toggleWatermark() {
      this.watermarkVisible = !this.watermarkVisible;
    }
  }
};
</script>

4. 总结

通过本文的介绍，我们学习了如何在Vue项目中添加满屏水印，并实现动态控制水印的显示和隐藏。使用Canvas生成水印图像，再通过CSS样式实现水印的全屏覆盖，可以有效保护网页内容。

以上就是Vue实现页面添加满屏水印和去除水印功能的详细内容，更多关于Vue页面添加和去除水印的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue列表如何实现滚动到指定位置样式改变效果
这篇文章主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
这篇文章主要介绍了解决vue axios跨域 Request Method: OPTIONS问题(预检请求)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue3使用video-player实现视频播放
video-player是一个基于video.js的视频播放器组件,本文主要介绍了Vue3使用video-player实现视频播放,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
Vue.js 2.0窥探之Virtual DOM到底是什么？
大家可能听说Vue.js 2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。那么下面这篇文章就来给大家详细介绍Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
Vue之常用的内置指令详解
这篇文章主要为大家介绍了Vue之常用的内置指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
2023-04-04
Vue.js的模板语法详解
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
2020-02-02
vue开发简单上传图片功能
这篇文章主要为大家详细介绍了vue开发简单上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue cookie和本地存储的使用详解
在Vue中,可以使用多种方式来处理cookie和本地存储,不同的方法还有不同的特点和适用场景,本文主要介绍了这些方法的对比和使用场景,希望对大家有所帮助
2023-08-08
vue中的过滤器实例代码详解
这篇文章主要介绍了vue中的过滤器，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06