Vue项目在页面添加水印功能

迷南。 2022-03-15 07:40 495阅读 0赞

# Vue项目在页面添加水印功能 #

## 创建watermark.js文件 ##

let watermark = {}
    
    let setWatermark = (str) => {
      let id = '1.23452384164.123412416';
    
      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
      }
    
      //创建一个画布
      let can = document.createElement('canvas');
      //设置画布的长宽
      can.width = 120;
      can.height = 120;
    
      let cans = can.getContext('2d');
      //旋转角度
      cans.rotate(-15 * Math.PI / 180);
      cans.font = '18px Vedana';
      //设置填充绘画的颜色、渐变或者模式
      cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
      //设置文本内容的当前对齐方式
      cans.textAlign = 'left';
      //设置在绘制文本时使用的当前文本基线
      cans.textBaseline = 'Middle';
      //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
      cans.fillText(str, can.width / 8, can.height / 2);
    
      let div = document.createElement('div');
      div.id = id;
      div.style.pointerEvents = 'none';
      div.style.top = '30px';
      div.style.left = '0px';
      div.style.position = 'fixed';
      div.style.zIndex = '100000';
      div.style.width = document.documentElement.clientWidth + 'px';
      div.style.height = document.documentElement.clientHeight + 'px';
      div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
      document.body.appendChild(div);
      return id;
    }
    
    // 该方法只允许调用一次
    watermark.set = (str) => {
      let id = setWatermark(str);
      setInterval(() => {
        if (document.getElementById(id) === null) {
          id = setWatermark(str);
        }
      }, 500);
      window.onresize = () => {
        setWatermark(str);
      };
    }
    
    export default watermark;

## 具体用法： ##

### 1.在App.vue文件中，导入该文件 ###

import Watermark from '@/common/js/watermark';  //路径不要写错

### 2.在mounted函数中调用 ###

mounted: function () {
        Watermark.set("水印内容")
    }

## 注意内容： ##

--------------------

> **一般我们的水印内容是当前用户的id或者姓名，在App.vue文件的mounted函数中有可能获取不到Vuex的用户信息。**

--------------------

> **我们一般在路由跳转的时候来进行用户的登录和权限的判断，所以我们可以将调用水印的方法放在router.afterEach()方法中，在router.beforeEach（）方法中判断用户的登录和权限的判断，所以router.afterEach()方法中一定可以获取到vuex中的用户信息。**

示例：

router.beforeEach((to, from, next) => {
      // 登录判断
      store.dispatch('getuser').then((user) => {
        if (to.path === '/') {
          if (user.isLeader) {
            next('/Summary');
          } else { next('/list'); }
        } else {
          next();
        }
      }).catch((error) => {
        if (error.message === 'noUser') {
         //返回登录界面
        } else {
          Dialog.confirm({
            title: '服务器错误',
            message: '获取用户信息失败,可尝试重新进入系统。',
            showCancelButton: false,
            showConfirmButton: false
          });
        }
      });
    });
    router.afterEach((to) => {
      /* 路由发生变化修改页面title */
      if (to.meta.title) {
        changTitle(to.meta.title);
      }
      Watermark.set(store.state.user.userId);
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，495人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目添加全局水印或某个指定页面水印源码

vue项目的页面添加水印,效果如图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

Bertha 。/ 2022年11月14日 13:23/ 0 赞/ 396 阅读

相关 vue 项目中添加水印效果

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单，它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式，然后将转换后的

今天药忘吃喽~/ 2022年11月02日 11:47/ 0 赞/ 596 阅读

相关 vue项目水印添加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2022年09月03日 04:29/ 0 赞/ 315 阅读

相关 vue 项目添加功能实现

一定义 api 模块 import request from '@/utils/request' export default {

待我称王封你为后i/ 2022年08月28日 06:56/ 0 赞/ 300 阅读

相关页面添加水印

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="statics/libs/j

小鱼儿/ 2022年05月26日 21:20/ 0 赞/ 371 阅读

相关 vue 在页面上添加水印

这是效果图： ![20190223175627429.png][] 将下列代码从开始到结束的代码复制到一个新建的js文件中，然后在需要使用的页面 impor

拼搏现实的明天。/ 2022年03月17日 09:54/ 0 赞/ 566 阅读

相关 Vue项目在页面添加水印功能

Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {} let setWatermark =

迷南。/ 2022年03月15日 07:40/ 0 赞/ 496 阅读

相关 vue、react网页添加水印

原理：在页面覆盖一个盒子，取消鼠标事件，层级最高，透明，用canvas，绘制背景为了防止内部数据泄露，拍照等等，水印可以添加登录人姓名，公司名等等代码：（借鉴

野性酷女/ 2021年09月19日 00:18/ 0 赞/ 551 阅读

相关 vue中添加水印效果

效果图 ![在这里插入图片描述][25a7082682e13cd3488e61e03e4e56d7.png_pic_center] 创建warterMark.js文件

待我称王封你为后i/ 2021年09月09日 03:14/ 0 赞/ 630 阅读

相关给html页面添加水印

看到别人的页面有水印，感觉很有趣尝试了下给html加水印的效果，如图 ![format_png][] 实现原理：　　根据页面大小，动态添加若干个div，将传递过来的

秒速五厘米/ 2021年07月26日 12:18/ 0 赞/ 1011 阅读