<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. h5网页水印SDK的实现代码示例

          发布时间:2019-02-19 15:24:24   作者:jay_tian   我要评论

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

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

        网页水印SDK,实现思路

        1.能更具获取到的当前用户信息,如名字,昵称,ID等,生成水印
        2.生成一个Canvas,覆盖整个窗口,并且不影响其他元素
        3.可以修改字体间距,大小,颜色
        4.不?#35272;礘query
        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

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

        相关文章

        • 清除网页文字水印的两种简单方法

          我们在浏览某些网站的时候,看到不错的网页可能就想把上面的内容给复制下来,但是有的网站就是为了防止别人复制,而在每段文字的结尾处增加了干扰码——与背景颜
          2008-10-17

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
              1. 体彩顶呱刮中奖秘诀 湖南幸运赛车体彩直播 河南11选5开奖直播玩法 山东时时彩诈骗案 重庆幸运农场走势图官网 中国排球比分直播 海南环岛赛骑行 闲来十三水下载 北京单场彩票点 贵州11选5任二当前遗漏 北京时时彩几号开奖时间 河南11选5每天开多少期 黑龙江22选5机选 上海时时彩开奖查询 重庆时时彩合买跟单