h5页面利用js添加水印

最近遇到一个需求，给所有页面加水印（登录人+登录时间），不影响其他点击等功能的使用，目的是防止信息外漏，当时就在想：这年头，PS就不说人人都能使用，谁手机还没个涂鸦功能，防不了，但是就是这么个需求，那就实现吧，不逼逼了，直接上：

具体实现思路：在页面底部加一个大的div,给这个div添加背景图，背景图？从哪来？canvas实现吧！

思路有了，直接上代码：

(function waterMark(){function textBecomeImg(text,fontsize,fontcolor){var canvas = document.createElement('canvas');$buHeight = 0;if(fontsize <= 32){ $buHeight = 99; }else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}else if(fontsize > 100 ){ $buHeight = 10;}canvas.height=fontsize + $buHeight ;canvas.padding=30;var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width*2, canvas.height);context.textAlign = "center";canvas.width = 450;canvas.height = 200;context.fillStyle = fontcolor;context.font=fontsize+"px Arial";context.textBaseline = 'middle'; context.fillText(text,0,fontsize/2);var canvasWidth = canvas.width/99;canvasWidth = context.measureText(text).width;var dataUrl = canvas.toDataURL('image/png');return dataUrl;}var text = DateUtil.getDate(new Date())+currentUserName;var shuiyinDiv = document.createElement('div');var style = shuiyinDiv.style;style.position = 'absolute';style.left = 0;style.top = '-60%';style.width = '120%';style.height = '200%';style.opacity = '0.1';style.background = "url("+textBecomeImg(text,22,"gray")+")";style.zIndex = 9999999991;style.transform = "rotate(-30deg)";style.pointerEvents = "none";document.body.appendChild(shuiyinDiv);
})();

效果图：

h5页面利用js添加水印相关推荐

h5页面使用js实现图片上传（安卓用户也可拍摄、相册二选一）
思路如下: 使用原生input标签实现图片上传时,如果你的写法是如下所示: <input type="file" id="upload_file" @ch ...
h5页面使用js实现保存当前图片到手机相册
来源:https://bbs.csdn.net/wap/topics/392154316?from=groupmessage var triggerEvent = "touchstart&q ...
Android webview支持H5页面通过js实现文件上传、图片上传
一.问题场景: 项目中遇到通过网页上传文件的需求,IOS直接是支持的,安卓端却没反应,有些机型甚至闪退.其实是Android的webview默认是不支持<input type="fil ...
H5页面，js监听安卓手机返回按键操作，禁用返回按键操作。
使用到的技术要点:history.pushState() 原理暂不做解释,后续再做补充,可参考 popstate官方文档 1.禁用手机返回按键,引入直接可用,亲测. XBack = {};(funct ...
利用js跳转页面与返回页面
利用js跳转页面利用 js跳转页面,其实也就是利用window对象中href属性进行跳转第一种方法,延时跳转 function me(){window.location.href = " ...
uni-app应用中控制webview的H5页面返回
在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键: 要实现这个功能,最主要的是完成应用与H5 的通讯问题. 1.H5向应用发送消息首先 ...
html(h5)页面实现微信js分享
html(h5)页面实现微信js分享注:并非所有代码原创服务端实现签名等因为引用了第三方dll,所以需先添加nuget包,这个包直接在nuget管理器中搜索不到,在pm控制台输入如下内容:也 I ...
android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊给大家提供一个思路,实现web加壳,利用打印浏览器实现简单来说就是把我们的web页面 ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...

h5页面利用js添加水印

h5页面利用js添加水印相关推荐

最新文章

热门文章