交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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

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


    广而告之:
    热门推荐:
    javascript的事件描述

    onblur:(使用在表单元素中,当元素失去焦点的时候执行)  onchange:(使用在表单元素中,当某些东西改变是执行)  onclick:(鼠标点击一个元素时执行)  ondblclick:(鼠标双击一个元素时执行)  onfocus:(使用在表单元素中,当元素获得焦点···

    HTML5中的websocket实现直播功能

    做视频直播这一块,前期研究了很多方案,包括websocket,因为各种原因最后没有采取这个方案,但还是想记录一下学习的心得。 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和···

    浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 bootstrap优缺点: 1.bootstap最近发布了bootstrap4,拥···

    ASP.NET在线文本编辑控件的使用(第6节)

    首先了解在线文本编辑环境FCKeditor的使用方法,然后使用FCKeditor实现设计一个发表日志文章的页面。 学习内容 1、将FCKeditorV2.dll文件添加到工具箱。       右击工具箱中的任一控件组,在弹出的快捷菜单中选择“选择项”,弹出“选择工具箱项”对话框···

    JS实现n秒后自动跳转的两种方法

    本文实例为大家分享了JS实现n秒后自动跳转的两种方法,供大家参考,具体内容如下 第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var time; time = $("#time").text(); time = ···

    js 页面关闭前的出现提示的实现代码

    实现起来比较简单如下 复制代码 代码如下: window.onbeforeunload = function() {   return "确定离开页面吗?"; } 还有一种写法 复制代码 代码如下: window.onbeforeunload = function(event) { (event || window.event).returnValue = "确定退出吗"; } 这个方法chr···

    PHP生成二维码的两个方法和实例

    随着科技的进步,二维码应用领域越来越广泛,本站之前已有文章介绍通过使用jQuery插件来生成二维码,今天我给大家分享下如何使用PHP生成二维码,以及如何生成中间带LOGO图像的二维码。 利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以···

    Google Maps基础及实例解析

    Google Maps 基础 创建一个简单的 Google 地图 现在让我们创建一个简单的 Google 地图。 以下是显示了英国伦敦的 Google 地图: 实例 <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOI···

    js在不刷新的情况下动态添加表格行[脚本之家强烈推荐]

    550)this.width=550;"> 动态添加表格行 添加产品品种数: 产品编号 产品名称 数量 单价 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章: js下为表格内部动态添加行的代码 javascript动态添加表格数据行(ASP后台数据库保存例子) javascr···