目的
實(shí)現(xiàn)PS系統(tǒng)頁(yè)面水印的需求鉴逞,提升系統(tǒng)的信息保密性记某。
實(shí)現(xiàn)原理
通過(guò)canvas繪制水印,將水印作為蒙層覆蓋頁(yè)面构捡。
實(shí)現(xiàn)步驟
在Application Designer中創(chuàng)建HTML對(duì)象液南,將watermark.js中代碼寫(xiě)入;
在PeopleTools/門(mén)戶(hù)網(wǎng)站/品牌化/品牌化系統(tǒng)選項(xiàng)中勾徽,添加JavaScript對(duì)象滑凉,即上一步創(chuàng)建的HTML對(duì)象;
水印效果
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 畫(huà)布(采用畫(huà)布方式喘帚,建議isOnResize=true)
* @param {boolean} [isOnResize=false] 是否監(jiān)聽(tīng)瀏覽器窗口變化畅姊,重繪水印
*/
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ù)覆蓋問(wèn)題
* @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], // 從歡迎語(yǔ)中獲取要作為水印的文本內(nèi)容
isOnResize: false,
displayMethod: "background"
}
new Watermark(options).init();
}, 50);
})
watermark.js使用注意事項(xiàng)
代碼中水印文本內(nèi)容是從歡迎語(yǔ)中獲取的吹由,可根據(jù)自身需求修改水印文本的獲取方式若未,例如請(qǐng)求數(shù)據(jù)接口獲劝揪堋陕截;
Watermark對(duì)象繪制水印可同時(shí)支持移動(dòng)端和PC端堂淡;
開(kāi)發(fā)者可理解實(shí)現(xiàn)思路忘衍,實(shí)現(xiàn)出更符合自身需求的水印排版。