VUE实现页面添加水印

码农搬砖人

已于 2024-09-13 16:21:47 修改

阅读量217

点赞数 7

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-09-13 15:23:58 首次发布

本文链接：https://blog.csdn.net/zgs_888/article/details/142210915

版权

在网站开发中，为了防止用户截图或录屏暴露敏感信息，追踪用户来源，需要在网页中添加水印。

方式一：集成watermark组件

1、添加watermark-dom依赖

npm install watermark-dom

2、在AppMain.vue文件引入水印模块

import watermark from "watermark-dom";

export default {
  name: "AppMain",
  mounted() {
    
    // 加载水印
    setInterval(() => {
        const username = "我的水印";
        const serviceTime = parseTime(new Date());
        const option = {
          watermark_txt: username + serviceTime, //水印的内容
          // watermark_font: '微软雅黑', //水印字体 默认微软雅黑 
          // watermark_color: "#777", //水印字体颜色
          // watermark_fontsize: "18px", //水印字体大小
          // watermark_alpha: 0.1, //水印透明度，要求设置在大于等于0.005 默认0.15
          // watermark_angle: 30, //水印倾斜度数
          // watermark_width: 300, //水印宽度