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 相关文章推荐
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
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
php生成RSS订阅的方法
2015/02/13 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
用JS实现的一个include函数
2007/07/21 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
12步教你理解Python装饰器
2016/02/25 Python
Python反射用法实例简析
2017/12/22 Python
Python中一行和多行import模块问题
2018/04/01 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python实现FTP循环上传文件
2020/03/20 Python
文明教师事迹材料
2014/01/16 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
授权委托书
2014/09/17 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
MySQL的存储过程和相关函数
2022/04/26 MySQL