hue添加水印功能

Posted 2022-11-11

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.重新刷新网页后效果如下

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