Vue实现页面添加水印功能


Posted in Javascript onNovember 09, 2019

创建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);
});

以上这篇Vue实现页面添加水印功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
VUE实现吸底按钮
Mar 04 Vue.js
vue 实现特定条件下绑定事件
Nov 09 #Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
js的逻辑运算符 ||
2010/05/31 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
react中使用swiper的具体方法
2018/05/15 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python字典及字典基本操作方法详解
2018/01/30 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python的垃圾回收机制详解
2019/08/28 Python
python多线程实现TCP服务端
2019/09/03 Python
keras 多任务多loss实例
2020/06/22 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
药店促销活动策划方案
2014/08/24 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
2016年党建工作简报
2015/11/26 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
MySQL主从切换的超详细步骤
2022/06/28 MySQL