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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
使用JS实现简易计算器
Jun 14 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
JS动画效果代码3
2008/04/03 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python入门篇之正则表达式
2014/10/20 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
党员创先争优公开承诺书
2014/03/28 职场文书
食品安全演讲稿
2014/09/01 职场文书
2014年维修工作总结
2014/11/22 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang