6
hue添加水印功能_江南独孤客的技术博客_51CTO博客
source link: https://blog.51cto.com/wang/5840511
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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() }
<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>
<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.重新刷新网页后效果如下
满屏的水印就出来 ，用户登录+日期的水印
- 打赏
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK