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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 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 和 HTML
2006/10/09 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
Laravel实现表单提交
2017/05/07 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
浅说js变量
2011/05/25 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
javascript轮播图算法
2016/10/21 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
会计主管岗位职责
2014/01/03 职场文书
精彩的英文自荐信
2014/01/30 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL