hue添加水印功能

广告位

1.备份hue.mako

cp -rf /opt/cloudera/parcels/CDH/lib/hue/desktop/core/src/desktop/templates/hue.mako /opt/cloudera/parcels/CDH/lib/hue/desktop/core/src/desktop/templates/hue.mako.bak

2.打开hue.mako文件

vim /opt/cloudera/parcels/CDH/lib/hue/desktop/core/src/desktop/templates/hue.mako

3.在以下代码之间添加代码并保存

<div id="jHueNotify" class="alert hide">
<button class="close">×</button>
<div class="message"></div>
</div>

之间添加代码

${ hueIcons.symbols() }
需要添加的代码
<div class="canvas-mark"></div>
<style>
.canvas-mark {
position: fixed;
top: 0;
width: 100%;
heiht:100%;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
pointer-events: none;
}
</style>
<script>
setTimeout(function(){
console.log(document.getElementsByClassName("main-page")[0])


var can = document.createElement("canvas");
document.getElementsByClassName("canvas-mark")[0].appendChild(can);
can.width = 250;
can.height = 100;
can.style.display = "none";
var cans = can.getContext("2d");
cans.rotate(-10 * Math.PI / 140);
cans.font = "14px Microsoft JhengHei";
cans.fillStyle = "rgba(140, 130, 130, 0.155555)";
cans.textAlign = "left";
cans.textBaseline = "Middle";
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let hour = date.getHours();
let mintues = date.getMinutes();
let dateString = year + "年" + month + "月" + day + "日" + hour + "时" + mintues + "分";
cans.fillText(window.LOGGED_USERNAME + " " + dateString, 0, can.height);
document.getElementsByClassName("canvas-mark")[0].style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";

},2000)
</script>

4.重新刷新网页后效果如下

满屏的水印就出来 ,用户登录+日期的水印

hue添加水印功能

本文来自网络,不代表技术学习分享_CKX技术立场,转载请注明出处。

作者: CKX技术

上一篇
下一篇
广告位

发表回复

返回顶部