h5页面快速制作方法(h5网页水印SDK的实现代码示例)
类别:Web前端 浏览量:1052
时间:2021-10-04 01:48:50 h5页面快速制作方法
h5网页水印SDK的实现代码示例在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件,聊天背景就会有你的名字。那么如何实现网页水印效果呢?
网页水印SDK,实现思路
1.能更具获取到的当前用户信息,如名字,昵称,ID等,生成水印
2.生成一个Canvas,覆盖整个窗口,并且不影响其他元素
3.可以修改字体间距,大小,颜色
4.不依赖Jquery
5.需要防止用户手动删除这个Canvas
实现分析
初始参数
size: 字体大小 color: 字体颜色 id: canvasId text: 文本内容 density: 间距 clarity: 清晰度 supportTip: Canvas不支持的文字提示
生成Canvas
根据id生成Canvas,画布大小为window.screen大小,若存在原有老的Canvas,清除并重新生成。
画布固定定位在可视窗口,z-index为-1
let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); canvas.style.cssText= 'position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;'; body[0].appendChild(canvas);
指纹生成算法
let canvas = document.getElementById(this.params.id); let cxt = canvas.getContext('2d'); let times = window.screen.width * this.params.clarity / this.params.density;//横向文字填充次数 let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //纵向文字填充次数 cxt.rotate(-15*Math.PI/180); //倾斜画布 for(let i = 0; i < times; i++) { for(let j = 0; j < heightTimes; j++) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + ' Arial'; cxt.fillText(this.params.text, this.params.density*i, j*this.params.density); } }
防止用户删除
使用定时器,定时检查指纹是否存在
let self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1000);
项目编译
使用glup编译
var gulp = require('gulp'), uglify = require("gulp-uglify"), babel = require("gulp-babel"); gulp.task('minify', function () { return gulp.src('./src/index.js') // 要压缩的js文件 .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //压缩后的路径 });
指纹效果
效果地址
https://tianshengjie.cn/apps/web_fingerprint
项目地址
Github: https://github.com/Jay-tian/web-fingerprint
Npm包: https://www.npmjs.com/package/web-fingerprint
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- access区分登录身份的代码(妙用.htaccess隐藏网页文件扩展名)
- php把当前网页生成pdf(php转换上传word文件为PDF的方法基于COM组件)
- 网页按钮设计的几个建议
- nginx优化分几种(Nginx优化服务之网页压缩的实现方法)
- JavaScript实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)
- 宝塔面板详细教程(使用宝塔面板建站时出现网页出现404错误怎么办?)
- 使用谷歌浏览器模拟移动端打开网页
- 什么是网页挂马,怎么防范网页被挂马
- 微信公众号扫码跳转网页(微信公众号实现扫码获取微信用户信息网页授权)
- php网页采集教程交流(PHP实现的抓取小说网站内容功能示例)
- 为什么网页不显示css效果(网页布局中CSS样式无效的十个重要原因详解)
- ASP.NET抓取网页内容
- python使用django搭建简单网页(Python后台开发Django的教程详解启动)
- iis服务器无法启动(Windows服务器中IIS返回的网页错误代码大汇总及原因解)
- javascript怎么编写游戏(javaScript实现网页版的弹球游戏)
- js实现网页特效(利用原生js模拟直播弹幕滚动效果)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
热门推荐
- Jquery中的offset()和position()的区别
- python给一个数字md5加密(Python写一个基于MD5的文件监听程序)
- 火狐和IE的window.event的区别
- 实战部署nginxdocker(基于Docker、Nginx和Jenkins实现前端自动化部署)
- jquery插件写法
- ie浏览器css颜色兼容(IE8的css hack9 使用说明)
- tomcat的startup闪退的原因(直接双击启动tomcat中的startup.bat闪退原因及解决方法)
- dedecms如何换主页模板(DEDECMS织梦模板实现图集单击图片翻页的教程)
- HttpWebResponse类的属性和方法
- linux中输出和追加命令(linux驱动开发中常用函数copy_from_user open read write详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9