文档章节

给页面加文字水印

BryanYang
 BryanYang
发布于 2017/11/08 17:29
字数 385
阅读 107
收藏 0
/**
 * Created by 晟途 on 2017/9/21.
 */
'use strict';

class Stamp {

  constructor(dom, text, options = {}) {

    let $root = document.getElementById(dom.replace('#',''));

    $root.style.position = "relative";

    let d = document.createElement('div');

    let style = {
      position: "fixed",
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      opacity: options.opacity ? options.opacity : .05,
      "pointer-events": "none",
      "z-index": 999999,
      "background-repeat":"repeat"
    };

    for(let key in style) d.style[key] = style[key];

    document.body.appendChild(d);

    let bgUrl = this.stamp(d, text);
    //低版本IE如果pointer-event失效需要hack
    !this.supportsPointerEvents() && this.bindClick($root,bgUrl,d);
  }

  bindClick ($root,bgUrl,removeTarget) {

    removeTarget.attachEvent('onclick', (e)=>{
      removeTarget.style.display = "none";
      let x = e.x, y = e.y;
      let target = document.elementFromPoint(x,y);
      let evt = document.createEvent('MouseEvents');
      evt.initEvent("click", true, true);
      target.dispatchEvent(evt);
      removeTarget.style.display = "block";
    })

  }

  supportsPointerEvents (){

    let dummy = document.createElement('_');

    if(!('pointerEvents' in dummy.style)) return false;

    dummy.style.pointerEvents = 'auto';
    dummy.style.pointerEvents = 'x';

    document.body.appendChild(dummy);

    let r = getComputedStyle(dummy).pointerEvents === 'auto';
    document.body.removeChild(dummy);

    return r;
  }

  stamp (dom, text) {
    var _ns = "http://www.w3.org/2000/svg";
    // 创建一个svg对象
    var svg = document.createElementNS(_ns, "svg");
    var width = 250, height = 100;

    this.setA(svg, {
      width : width,
      height : height
    })

    // // svg中绘制文本
    var svgText = document.createElementNS(_ns, "text");

    this.setA(svgText, {
      fill: "black",
      "text-anchor": "middle",
      "font-family": "monospace",
      "transform": "translate(125, 50)rotate(-15)"
    })

    svgText.textContent = text

    svg.appendChild(svgText);

    var svgStr = new XMLSerializer().serializeToString(svg);

    var bgUrl = 'data:image/svg+xml;base64,' + this.encode(svgStr);

    dom.style.backgroundImage = 'url(' + bgUrl + ')';

    return bgUrl;
  }

  encode (input) {
    var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    input = this._utf8_encode(input);

    while (i < input.length) {

      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }

      output = output +
        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);

    }

    return output;
  }

  _utf8_encode (string) {
    string = string.replace(/\r\n/g, "\n");
    var utftext = "";

    for (var n = 0; n < string.length; n++) {

      var c = string.charCodeAt(n);

      if (c < 128) {
        utftext += String.fromCharCode(c);
      }
      else if ((c > 127) && (c < 2048)) {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      }
      else {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }

    }

    return utftext;
  }

  setA (target, obj) {
    for(let key in obj) {
      target.setAttribute(key, obj[key])
    }
  }
}

module.exports = Stamp;

export default Stamp;

 

© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
加载中

评论(0)

如何通过java给word添加多个文字水印

最近用到给word添加水印的需求,但是网上找的都是只能加一个文字水印,我想要的是多个文字水印排满页面的哪种,有没有大佬做过的给个demo

CY灵感
2019/08/07
569
1
Thinkphp中文水印和图片水印合体集成插件

今天给大家分享一下中文水印和图片水印合体集成插件,Thinkphp只有单独的加文字或加图片,由于工作的需要需要同里加“文字”和“图片”于是,试着修改了一下,只需要一行代码解决图片和文字水...

2当家的
2016/12/14
250
0
php编程之kindeditor上传图片加水印实现

  对于如何在图片上添加水印是许多技术人员遇到的一个难题,那大家都见过微信公众号及一些其他技术平台是可以实现这个功能的,但是对于源码是如何实现的,却没有头绪,那么今天就为大家介绍...

燚轩科技
2018/05/02
0
0
PHP操作图像

PHP确实是一个简单的语言,PHP能够那么流行也是因为该语言能够从简单出发,用最简单的语句就实现功能,摒弃了过多的繁琐配置,寥寥几句就可以实现JAVA需要写一堆才能实现的功能;这个既是有点...

安世博
2015/01/22
84
0
ios图片加水印或文字

ios图片加水印或文字 详情可见附件,我亲自测试了一下,发现原来的方法确实存在诸多问题,重新写了一下,大家随意取用,有问题再交流 发一张截图 原帖:[url]http://hi.baidu.com/peter_wwj/...

SoulJa
2016/11/30
20
0

没有更多内容

加载失败,请刷新页面

加载更多

Flume概述及组成

Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集、聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并...

长臂猿猴
33分钟前
64
0
将较小的显示器切换到较大的显示器时,有没有办法重新绘制tmux窗口?

假设您使用Terminal.app通过ssh连接到远程服务器。 当您使用较大的分辨率监视器“tmux attach”时,您之前启动了tmux,它会在控制台周围绘制点。 它不适合新的窗口大小。 有没有办法重绘和清...

技术盛宴
41分钟前
34
0
在两个日期之间查找对象MongoDB

我一直在围绕在mongodb中存储推文,每个对象看起来像这样: {"_id" : ObjectId("4c02c58de500fe1be1000005"),"contributors" : null,"text" : "Hello world","user" : { "following......

javail
56分钟前
59
0
《aelf经济和治理白皮书》重磅发布:为DAPP提供治理高效、价值驱动的生态环境

2020年2月17日,aelf正式发布《aelf经济和治理白皮书》,这是aelf继项目白皮书后,在aelf网络经济模型和治理模式方面的权威论述。 《aelf经济和治理白皮书》描述了aelf生态中各个角色及利益的...

AELF开发者社区
今天
53
0
战疫 | 高德工程师如何在3天上线“医护专车”

新冠状病毒肺炎疫情突袭,无数医护人员放弃与家人团聚,明知凶险,仍然奋战在一线。但因为武汉公交、地铁、网约车停运,医护人员上下班很难。白衣天使疾呼打车难。 (截图摘自《财经国家周刊...

amap_tech
今天
55
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部