VIP用户交流群:462197261热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
  • 当前位置:
  • h5网页水印SDK的实现代码示例

    教程大全 2019年10月23日 关键词:,,

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

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

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


    广而告之:
    热门推荐:
    浅析php插件 Simple HTML DOM 用DOM方式处理HTML

    simple_html_dom插件用dom处理html文件的利器使用:加载simple_html_dom.php文件复制代码 代码如下:require_once 'simple_html_dom.php'new simple_html_dom对象复制代码 代码如下:$dom = new simple_html_dom()加载html复制代码 代码如下:$dom->load($html);find()方···

    PHP中FTP相关函数小结

    本文实例讲述了PHP中FTP相关函数。分享给大家供大家参考,具体如下: <?php set_time_limit(0); //转存本地地址 define( 'STORE_PATH', dirname(__FILE__) . '/../../../../temp_data/test/' ); define('LIST_PATH', STORE_PATH . 'list/'); define('CHAPTER_PATH···

    MySQL 字符串截取相关函数小结

    文中给大家介绍MySQL 字符串截取相关函数,具体内容如下所示: 在工作中,可能需要将某些字段按某个分割符组成一个字符串作为字段值存取到数据库表中,比如某个任务对应三个结果,分别存储在不同的数据表中,这时可以将这三个不同表的主键按照约定的顺序进行组合(主键a:主键b:···

    node.js连接mysql与基本用法示例

    本文实例讲述了node.js连接mysql与基本用法。分享给大家供大家参考,具体如下: 下载mysql模块 使用命令npm install mysql下载mysql模块 mysql引入模块 var mysql = require("mysql"); 创建连接池 使用createPool()创建一个mysql连接池,传入一个表参数作为连接信息 var po···

    PHP实现多关键字加亮功能

    本文主要介绍的是PHP实现多关键字加亮功能,可以实现在搜索的时候进行高亮提醒,具体实现代码如下: 项目结构: 搜索结果:  高亮显示 项目所需数据库结构: 实现代码: conn.php <?php $conn = @ mysql_connect("localhost", "root", "") or die("数据···

    十天学会php之第一天

        以前写了十天学会ASP,十天学会ASP.NET什么的,现在想想再写个PHP吧,也算比较全了。 PHP的调试方法我这里就不说了,外面很多文章都有介绍,也有很多不同的组合。我这里暂时是以 Apache web server 和 MY SQL 作为WEB服务器和数据库,在php-4.3.3下的···

    PHP入门教程之数学运算技巧总结

    本文实例讲述了PHP入门教程之数学运算技巧。分享给大家供大家参考,具体如下: Demo1.php <?php // $a = '5'; // $b = 7+$a; // echo $b; $a = 'a'; $b = 7+$a; echo $b; ?> Demo2.php <?php $a = 10.0; //is_int -- 检测变量是否是整数···

    Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)

    Erlang的比较运算符 opDescription==等于/=不等于=<小于等于<小于>=大于等于>大于=:=精确的等于=/=精确的不等于等于和精确等于的区别: 如果要比较两个数,如果两个数之间是不同的类型,比如float和int那么,==操作会首先把两个数字转换成相同的相同类型。···

    Vue实现PopupWindow组件详解

    这段时间一直在学习前端技术来完成自己的小项目。在js方面就使用了Vue框架。由于在项目里想实现一个新建地址的PopupWindow效果,便想到可以使用Vue的一些特性来实现。 用到的Vue特性:组件(Component),props传值,slot内容插入,transitions过渡动画,x-templete模板。 直···

    php进行ip地址掩码运算处理的方法

    本文实例讲述了php进行ip地址掩码运算处理的方法。分享给大家供大家参考,具体如下: ip解析: function ip_parse($ip_str) { $mark_len = 32; if (strpos($ip_str, "/") > 0) { list($ip_str, $mark_len) = explode("/", $ip_str); } $ip = ip2long($ip_str); $mar···