vue 页面添加水印并在浏览器不能去除

创建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 = 320;can.height = 200;let cans = can.getContext('2d');// 旋转角度cans.rotate(-15 * Math.PI / 180);cans.font = '0.72912vw Vedana';// 设置填充绘画的颜色、渐变或者模式cans.fillStyle = 'rgba(200, 200, 200, 0.40)';// 设置文本内容的当前对齐方式cans.textAlign = 'left';// 设置在绘制文本时使用的当前文本基线cans.textBaseline = 'Middle';// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）cans.fillText(str.name + '  账号：' + str.phone, 30, 105);cans.font = '0.46872vw Vedana';cans.fillText(str.company, 30, 85);cans.font = '0.85496vw Vedana';cans.fillText("链祺通平台", 80, 55);// 绘制logovar img = document.getElementById("imgUrl");cans.drawImage(img, 30, 30, 40, 40);cans.font = '0.62496vw Vedana';var div = document.createElement('div');div.id = id;div.style.pointerEvents = 'none';div.style.top = '5.2vw';div.style.left = '23.436vw';div.style.position = 'fixed';div.style.zIndex = '99999999999999';div.style.width = '52vw';div.style.height = '79.52616vw';div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';document.body.appendChild(div);setTimeout(() => {// 防止用户在控制台修改删除水印let body = document.getElementsByTagName('body')[0]let options = {childList: true,attributes: true,characterData: true,subtree: true,attributeOldValue: true,characterDataOldValue: true}let observer = new MutationObserver(() => {div.id = id;div.style.pointerEvents = 'none';div.style.top = '5.2vw';div.style.left = '23.436vw';div.style.position = 'fixed';div.style.zIndex = '99999999999999';div.style.width = '52vw';div.style.height = '79.52616vw';div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';observer.disconnect();observer.observe(body, options)return false})observer.observe(body, options) // 监听body节点}, 1000);  // 防止在页面未渲染完成的时候找不到页面idreturn id;
}// 添加水印该方法只允许调用一次
watermark.set = (str) => {let id = setWatermark(str);setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str);}}, 500);window.onresize = () => {setWatermark(str);};
}const outWatermark = (id) => {if (document.getElementById(id) !== null) {const div = document.getElementById(id)div.style.display = 'none'}
}watermark.out = () => {const str = '1.23452384164.123412416'outWatermark(str)// 去除水印
}
export default watermark;

页面调用

 var str = {name: "水印内容",  // phone: "水印内容",company: "水印内容"}Watermark.set(str)

vue 页面添加水印并在浏览器不能去除相关推荐

Vue - 页面添加水印效果
Vue 页面中使用水印效果水印效果使用方法水印效果全屏水印指定容器水印使用方法项目中新建一个 watermark.js 文件 let watermark = {};let setWate ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
vue项目添加水印，防止刷新页面水印消失
引入一个waterMark.js文件之后 IE各种问题问题1:页面出现空白,登录页面都没有显示出来问题2:IE低版本(11以下)总是报语法错误问题1出现的原因是js文件包含箭头函数问题2出现的 ...
从输入URL到页面成功展示到浏览器的过程？
主干流程梳理: 知识体系中,最重要的是骨架,脉络.有了骨架后,才方便填充细节.所以,先梳理下主干流程: 从浏览器接收到url到开启网络请求线程(这一部分涉及浏览器的机制以及进程与线程之间的关系) 从开 ...
IOS上从第三方页面回跳VUE页面页面不刷新问题
情景描述: IOS系统环境下,从微信的vue页面A中跳转到第三方页面B,然后点击浏览器返回按钮返回A页面. 问题描述: IOS系统下,A页面没有刷新:Android正常刷新. 问题解决: 在A页面mo ...
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)
效果如下: 加了红色边框的就是你实际的xxx.vue页面,放大时放大至页面左上角,缩小时,缩小至中间这是浏览器最小化后一.给App.vue设置minWidth.minHeight.maxWidth ...
vue下载大文件时浏览器不显示下载进度
vue下载大文件时浏览器不显示下载进度问题描述最近开发中遇到个问题,项目需要下载大文件(音视频),由于后端给我的是视频的地址而不是直接返回流,所以前端用了XMLHttpRequest获取视频流并实 ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...

vue 页面添加水印并在浏览器不能去除

vue 页面添加水印并在浏览器不能去除相关推荐

最新文章

热门文章