vue项目中页面添加水印

很多时候在后台管理系统中，有在页面中添加员工姓名的水印的需求，保证系统的安全性。可以定一个如下的方法，提供两种方案供选择，第二种更简洁，也是我目前使用的，很稳定。

第一种方案：

watermark(settings) {//默认设置var defaultSettings={watermark_txt:settings.watermark_txt,watermark_x:20,//水印起始位置x轴坐标watermark_y:20,//水印起始位置Y轴坐标watermark_rows:5,//水印行数watermark_cols:10,//水印列数watermark_x_space:100,//水印x轴间隔watermark_y_space:100,//水印y轴间隔watermark_color:'#aaa',//水印字体颜色watermark_alpha:0.4,//水印透明度watermark_fontsize:'15px',//水印字体大小watermark_font:'微软雅黑',//水印字体watermark_width:210,//水印宽度watermark_height:80,//水印长度watermark_angle:15//水印倾斜度数};//采用配置项替换默认值，作用类似jquery.extendif(arguments.length===1&&typeof arguments[0] ==="object" ){var src=arguments[0]||{};for(var keyS in src){if(src[keyS]&&defaultSettings[keyS]&&src[keyS]===defaultSettings[keyS])continue;else if(src[keyS])defaultSettings[keyS]=src[keyS];}}var oTemp = document.createDocumentFragment();//获取页面最大宽度var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);var cutWidth = page_width*0.0150;var page_width=page_width-cutWidth;//获取页面最大高度var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+650;// var page_height = document.body.scrollHeight+document.body.scrollTop;//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space) - 1);defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1) - 10);}//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));}var x;var y;for (var i = 0; i < defaultSettings.watermark_rows; i++) {y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;for (var j = 0; j < defaultSettings.watermark_cols; j++) {x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;var mask_div = document.createElement('div');mask_div.id = 'mask_div' + i + j;mask_div.className = 'mask_div';mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";mask_div.style.visibility = "";mask_div.style.position = "absolute";mask_div.style.left = x + 'px';mask_div.style.top = y + 'px';mask_div.style.overflow = "hidden";mask_div.style.zIndex = "9999";mask_div.style.pointerEvents='none';//pointer-events:none  让水印不遮挡页面的点击事件//mask_div.style.border="solid #eee 1px";mask_div.style.opacity = defaultSettings.watermark_alpha;mask_div.style.fontSize = defaultSettings.watermark_fontsize;mask_div.style.fontFamily = defaultSettings.watermark_font;mask_div.style.color = defaultSettings.watermark_color;mask_div.style.textAlign = "center";mask_div.style.width = defaultSettings.watermark_width + 'px';mask_div.style.height = defaultSettings.watermark_height + 'px';mask_div.style.display = "block";oTemp.appendChild(mask_div);};};document.body.appendChild(oTemp);},
// 定义时间
timeFormate() {let date = new Date();let Y = date.getFullYear();let M= (date.getMonth() + 1) < 10? '0' + (date.getMonth() + 1) :date.getMonth() + 1 ;let D = date.getDate()<10? '0'+ date.getDate():date.getDate();return Y +M +D}

最后在页面的created生命周期函数中调用即可

created() {if(this.userInfo) {let userId = this.userInfo.nickname ;this.watermark({watermark_txt:userId + " " + this.timeFormate()});}},

最终呈现的页面效果如下：

或者在mian.js中引入方法：

router.afterEach((to) => {const title = getToken()if (title) {Watermark(title) // 设置水印title}
})

第二种方案：

第一步：创建js文件

let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}let can = document.createElement('canvas')can.width = 500can.height = 250let cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180)cans.font = '14px Microsoft JhengHei'cans.fillStyle = '#dddddd'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 3, can.height / 2)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '70px'div.style.left = '0px'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth - 100 + 'px'div.style.height = document.documentElement.clientHeight - 100 + '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

第二步：引入并调用

import watermark from '../../libs/watermark'watermark.set(JSON.parse(Cookies.get("userInfo")).nickname);

效果如下：

vue项目中页面添加水印相关推荐

Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
解决：vue项目中页面顶部和左边出现空白
vue项目中页面顶部和左边出现空白本次问题是调试login.vue页面时出现的.发现页面顶部和左边出现不应该出现的空白后,打开f12,查看.发现左边的空白是body的margin.于是在本页面css ...
Vue项目在页面添加水印及在某一个页面去除水印功能
项目需求 (1)系统内页面出现水印: (2)登录页面没有水印[备注:退出登录时,登录页面不会显示水印**] 创建水印创建watermark.js文件 # 创建水印功能网上一大把,随便搜一下 'use ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
vue项目中页面响应式布局设计方案
针对全屏页面开发,兼容 19201080,以及 1366768 js设置原型属性$screen: 获取当前是什么屏幕 isS: 1366定义的最小屏幕 isM: 1366-1600的中间屏幕 isB: ...
VUE项目前端页面添加水印
前段时间看到别人的页面有当前登录人的姓名水印,后面在网上学习了一下,故在这记录一下 1,创建一个放水印的元素 2,通过canvas创建图片,以背景图的方式实现水印 getWater() {const ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

vue项目中页面添加水印

vue项目中页面添加水印相关推荐

最新文章

热门文章