h5网页水印SDK的实现代码示例


Posted in HTML / CSS onFebruary 19, 2019

在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件,聊天背景就会有你的名字。那么如何实现网页水印效果呢?

网页水印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')); //压缩后的路径
    });

指纹效果

h5网页水印SDK的实现代码示例

效果地址

https://tianshengjie.cn/apps/web_fingerprint

项目地址

Github: https://github.com/Jay-tian/web-fingerprint
Npm包: https://www.npmjs.com/package/web-fingerprint

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 #HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 #HTML / CSS
Canvas系列之滤镜效果
Feb 12 #HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
You might like
长波知识介绍
2021/03/01 无线电
Php获取金书网的书名的实现代码
2010/06/11 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
非常好的js代码
2006/06/27 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解javascript函数写法大全
2019/03/25 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python语言的面相对象编程方式初步学习
2016/03/12 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python高级用法总结
2018/05/26 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
经理秘书岗位职责
2013/11/14 职场文书
十八大演讲稿
2014/05/22 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
Hive HQL支持2种查询语句风格
2022/06/25 数据库