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

网页水印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

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

h5网页水印SDK的实现代码示例的更多相关文章

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

    这篇文章主要介绍了h5网页水印SDK的实现代码示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. windows-8 – Windows 8是否编译JavaScript?

    是.Jcol由Chakra引擎在Windows8上执行.与.NET即时编译器类似,它将javascript转换为优化的机器代码.此外,谷歌的V8和Mozilla的TraceMonkey引擎采取的方法.一些背景信息ishere.

  3. 获取PHP调用网页的URL

    没有任何突破性的.我想做的是能够通过网页分解网站点击量.例如,一个人可以在每个页面上包含相同的代码,统计网站将知道哪个页面被击中了多少次.PHP中有没有办法获取调用页面的URL?我知道如何获取运行PHP代码的页面的URL,而不是调用页面.或者,我可能会使用一些JavaScript将页面URL传递给stats网站,但需要嵌入的代码越少越好,所以我希望有一个PHP解决方案.在此先感谢您的帮助!$_SERVER[‘HTTP_REFERER’]会为您提供引荐页面.

  4. PHP代码突然出现在我的网页中而不是执行 – 之前没有这样做过吗?

    PHP代码的块或部分突然出现在我的网页中,就好像它们没有被识别为PHP代码一样.我之前找到它工作,我想不出任何我改变或完成的任何会阻止它工作的东西!我花了很长时间才开始让Apache,MysqL和PHP一起工作,现在这个.我准备撕掉我的头发!!例1:示例1代码:(请注意,一个PHP代码块显示在网页中,而另一个则没有!什么是PHPinfo()页面的路径?

  5. 利用正则表达式统计代码中的代码行数,注释行数,空白行数利用正则表达式获取一个网页中所有的邮箱地址

    正则表达式的简单应用:利用正则表达式统计代码中的。

  6. xpath与正则表达式抽取网页信息的速度比较

    以前我都是用正则表达式处理网页,对于那种非常不是经常改代码的网站,正则提取是非常好的但对于经常改代码的网站,写一个好的正则表达式确实有点费事,用xpath就比较好,但写了脚本之后发现比以前慢一些,于是写了一个小程序测试一下速度随便将一个百度搜索结果页另存为S:\baidu.htm,取title标签中的字符串结果如下0.005761981769850.08403500978170.077803370

  7. ajax对象的属性

    ajax的属性status常见的状态码类型:200正常访问304访问缓存403拒绝访问404没有此页面503-服务器暂时不可用1xx用于表示临时响应并需要请求者执行操作才能继续的状态代码。如果您的robots.txt文件显示为此状态,那么,这表示Googlebot已成功检索到该文件。对于除HEAD请求之外的所有请求,服务器会自动转到其他位置。4xx这些状态代码表示,请求可能出错,已妨碍了服务器对请求的处理。服务器必须包含有关响应中所发生的冲突的信息。

  8. 牛腩新闻发布系统小总结

    6·web程序服务器的搭建部署,IIS服务器的初步使用技巧在牛腩新闻发布系统结束时需要发布,发布必不可免的要设计到Web的服务器搭建部署,其中设计到IIS的安装,自己整完了,但是不明其中的道理,有待进一步研究。

  9. Ajax / Javascript 框架简介及集合列表

    Ajax/Javascript框架简介及集合列表AJAX框架能够帮助我们快速开发能够通过JavaScript调用WebService的网页,而不必要提交整个页面。Rico为AJAX请求句柄提供了非常简单的注册接口,还可以将HTML元素和JavaScript对象作为AJAX回应的对象。这个工具包实现了JavaScript和Flash的无缝交流。它基于AJAX的原则,利用JavaScript和客户端的XMLHTTP对象,以及适当的服务端脚本来完成一个完成的AJAX交互生命周期。

  10. 掌握 Ajax,第 5 部分: 操纵 DOM

    给定网页的具体模型称为该页面的DOM树。虽然不同的浏览器有一些区别,但如果使用DOM核心功能并注意少数特殊情况和例外,DOM代码就能以同样的方式用于任何浏览器。因此可以从这些语言中使用DOM。本系列文章主要讨论JavaScript的DOM绑定。总之,建议您也尝试一下其他语言中的DOM绑定。回页首节点的概念节点是DOM中最基本的对象类型。在DOM树中,基本上一切都是节点。

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部