目的

實(shí)現(xiàn)PS系統(tǒng)頁面水印的需求，提升系統(tǒng)的信息保密性。

實(shí)現(xiàn)原理

通過canvas繪制水印，將水印作為蒙層覆蓋頁面。

實(shí)現(xiàn)步驟

1. 在Application Designer中創(chuàng)建HTML對象，將watermark.js中代碼寫入；

2. 在PeopleTools/門戶網(wǎng)站/品牌化/品牌化系統(tǒng)選項(xiàng)中，添加JavaScript對象，即上一步創(chuàng)建的HTML對象；

水印效果

img.png

watermark.js內(nèi)容

/**
 * @description 水印
 * @author LeaFish <735683662@qq.com>
 * @date 2019-03-13
 * @param {string} [id="watermark"] 水印元素ID
 * @param {number} [height=80] 單個(gè)水印塊高度
 * @param {number} [width=150] 單個(gè)水印塊寬度
 * @param {string} [text] 水印文本
 * @param {number} [fontSize=13] 文本字體大小
 * @param {string} [color="rgba(100,100,100,0.2)"] 文本顏色
 * @param {string} [displayMethod] 展現(xiàn)方式：background 背景圖(采用repeat特性) canvas 畫布(采用畫布方式，建議isOnResize=true)
 * @param {boolean} [isOnResize=false] 是否監(jiān)聽瀏覽器窗口變化，重繪水印
 */
function Watermark(options) {
  options = options || {};
  this.id = options.id || "watermark";
  this.canvas = document.createElement("canvas");
  this.ctx = this.canvas.getContext("2d");
  this.height = options.height || 80;
  this.width = options.width || 150; // 控制水印的間隙大小
  this.text = options.text || "";
  this.fontSize = options.fontSize || 13;
  this.color = options.color || "rgba(100,100,100,0.2)";
  this.displayMethod = options.displayMethod || "background";
  this.isOnResize = options.isOnResize || false;

  // 獲取設(shè)備像素比
  this.PIXEL_RATIO = (function () {
    var dpr = window.devicePixelRatio || 1;
    var bsr = this.ctx.webkitBackingStorePixelRatio ||
      this.ctx.mozBackingStorePixelRatio ||
      this.ctx.msBackingStorePixelRatio ||
      this.ctx.oBackingStorePixelRatio ||
      this.ctx.backingStorePixelRatio || 1;
    return dpr / bsr;
  }.bind(this))();

  /**
   * @description 初始化執(zhí)行函數(shù)
   * @author LeaFish <735683662@qq.com>
   * @date 2019-03-13
   */
  this.init = function () {
    this.draw();
    this.addToBody();

    this.isOnResize && (window.onresize = function () {
      this.draw();
      this.displayMethod === "canvas" || this.addToBody();
    }.bind(this));
  }

  /**
   * @description 繪制水印
   * @author LeaFish <735683662@qq.com>
   * @date 2019-03-13
   */
  this.draw = function () {
    var canvasWidth = window.innerWidth;
    var canvasHeight = window.innerHeight * 2;

    // 適配高清屏，canvas內(nèi)容的寬高是實(shí)際的寬高的PIXEL_RATIO倍
    this.canvas.width = canvasWidth * this.PIXEL_RATIO;
    this.canvas.height = canvasHeight * this.PIXEL_RATIO;
    this.canvas.style.width = canvasWidth + "px";
    this.canvas.style.height = canvasHeight + "px";
    // 縮放繪圖
    this.ctx.setTransform(this.PIXEL_RATIO, 0, 0, this.PIXEL_RATIO, 0, 0);

    this.ctx.font = this.fontSize + "px 黑體";
    this.ctx.rotate(-20 * Math.PI / 180);
    this.ctx.fillStyle = this.color;

    // 繪制文字
    for (var y = 1; y < window.innerHeight * 2 / this.height + 1; y++) {
      for (var x = 1; x < window.innerWidth * 2 / this.width; x++) {
        this.ctx.fillText(this.text, (y % 2 ? 0 : this.width / 2) + x * this.width - window.innerWidth, y * this.height);
      }
    }
  };

  /**
   * @description 將水印添加到body上
   * @author LeaFish <735683662@qq.com>
   * @date 2019-03-13
   */
  this.addToBody = function () {
    var element = null;

    if (this.displayMethod === "canvas") {
      element = this.canvas;
    } else {
      var base64 = this.canvas.toDataURL("image/png");
      element = document.createElement('div');
      element.style.backgroundSize = innerWidth + "px";
      element.style.backgroundImage = "url(" + base64 + ")";
      element.style.backgroundRepeat = "repeat";
    }

    element.id = this.id;
    element.style.position = "fixed";
    element.style.left = 0;
    element.style.right = 0;
    element.style.top = 0;
    element.style.bottom = 0;
    element.style.pointerEvents = "none"; // 蒙層事件穿透
    element.style.zIndex = 20000000;

    document.getElementById(this.id) && document.body.removeChild(document.getElementById(this.id));
    document.body.appendChild(element);
  }
}

/**
 * @description 處理多l(xiāng)oad事件回調(diào)函數(shù)覆蓋問題
 * @author LeaFish <735683662@qq.com>
 * @date 2019-03-13
 * @param {*} x
 */
function addOnloadEvent(x) {
  var oldOnLoad = window.onload;
  if (typeof oldOnLoad != "function") {
    window.onload = x;
  } else {
    window.onload = function () {
      oldOnLoad();
      x();
    }
  }
}

addOnloadEvent(function () {
  // 避免iframe間多層水印層疊
  document.getElementById("ptifrmtemplate") && setTimeout(function () {
    var options = {
      text: parent.document.getElementsByClassName("greeting")[0].innerText.split("：")[1], // 從歡迎語中獲取要作為水印的文本內(nèi)容
      isOnResize: false,
      displayMethod: "background"
    }
    new Watermark(options).init();
  }, 50);
})

watermark.js使用注意事項(xiàng)

1. 代碼中水印文本內(nèi)容是從歡迎語中獲取的，可根據(jù)自身需求修改水印文本的獲取方式，例如請求數(shù)據(jù)接口獲??；

2. Watermark對象繪制水印可同時(shí)支持移動(dòng)端和PC端；

開發(fā)者可理解實(shí)現(xiàn)思路，實(shí)現(xiàn)出更符合自身需求的水印排版。