百度360必应搜狗淘宝本站头条
wireshark怎么抓包c++ base64for_eachwxsqlite3qt sleep
当前位置：网站首页 > 技术分析 > 正文

用js实现html页面水印

liebian365 2025-01-13 15:22 16 浏览 0 评论

用js实现html页面水印

要在 HTML 页面中添加水印并防止截图，可以使用 JavaScript。以下是实现的基本步骤：

1、在 HTML 中添加一个 div 元素作为水印容器，并设置其样式。

2、使用 JavaScript 动态生成水印内容，并将其添加到水印容器中。

3、通过 CSS 设置水印文本的样式，例如颜色、字体大小等。

4、使用 CSS 将水印容器置于所有其他元素的最顶层，从而覆盖整个页面。

5、监听窗口的 resize 和 scroll 事件，以便及时更新水印位置。

6、使用 Canvas 绘制图片或者使用 CSS 的 mix-blend-mode 属性来实现防截图效果。

下面是一个示例代码片段：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Watermark Example</title>

<style>

#watermark {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 9999;

pointer-events: none;

}


#watermark span {

font-size: 24px;

color: #ccc;

position: absolute;

transform: rotate(-30deg);

padding:100px;

pointer-events: none;

}

</style>

</head>

<body>

<div id="watermark"></div>

<script>

function createWatermark() {

var watermark = document.getElementById('watermark');

var angle = -30;

var top = -30;

var text = 'My Watermark';


for (var i = 0; i < 10; i++) {

var span = document.createElement('span');

span.style.left = i * 200 + 'px';

span.style.top = i * top + 'px';

span.style.webkitTransform = 'rotate(' + angle + 'deg)';

span.style.MozTransform = 'rotate(' + angle + 'deg)';

span.style.msTransform = 'rotate(' + angle + 'deg)';

span.style.OTransform = 'rotate(' + angle + 'deg)';

span.style.transform = 'rotate(' + angle + 'deg)';

span.appendChild(document.createTextNode(text));

watermark.appendChild(span);

angle += 15;

top += 15;

}

}


createWatermark();


window.addEventListener('resize', function() {

createWatermark();

});


window.addEventListener('scroll', function() {

createWatermark();

});


// 防截图

var canvas = document.createElement('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

canvas.style.position = 'fixed';

canvas.style.top = 0;

canvas.style.left = 0;

canvas.style.pointerEvents = 'none';

canvas.style.mixBlendMode = 'multiply';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, canvas.width, canvas.height);

</script>

</body>

</html>

这个示例代码添加了一个水印容器，并在其中添加了一些旋转的文本。使用 CSS 将水印容器置于最顶层，并禁用了其指针事件，以防止干扰用户操作。同时在窗口 resize 和 scroll 事件中更新水印位置，以适应页面变化。

如果想保护上面的JavaScript代码逻辑，可以用JShaman进行JavaScript代码混淆加密，加密后的代码不可读、可起到防分析的作用。

此外，这个示例代码还使用 Canvas 绘制了一个与页面大小相同的黑色矩形，并将其与水印容器叠加在一起。由于 mix-blend-mode 属性的作用，截图时就无法完整地复制水印文本，从而达到防截图的效果。

效果：

相关推荐

4万多吨豪华游轮遇险 竟是因为这个原因……

（观察者网讯）4.7万吨豪华游轮搁浅，竟是因为油量太低？据观察者网此前报道，挪威游轮“维京天空”号上周六（23日）在挪威近海发生引擎故障搁浅。船上载有1300多人，其中28人受伤住院。经过数天的调...

“菜鸟黑客”必用兵器之“渗透测试篇二”

"菜鸟黑客"必用兵器之"渗透测试篇二"上篇文章主要针对伙伴们对"渗透测试"应该如何学习？"渗透测试"的基本流程？本篇文章继续上次的分享，接着介绍一下黑客们常用的渗透测试工具有哪些？以及用实验环境让大家...

科幻春晚丨《震动羽翼说“Hello”》两万年星间飞行，探测器对地球的最终告白

作者|藤井太洋译者|祝力新【编者按】2021年科幻春晚的最后一篇小说，来自大家喜爱的日本科幻作家藤井太洋。小说将视角放在一颗太空探测器上，延续了他一贯的浪漫风格。...

麦子陪你做作业(二):KEGG通路数据库的正确打开姿势

作者：麦子KEGG是通路数据库中最庞大的，涵盖基因组网络信息，主要注释基因的功能和调控关系。当我们选到了合适的候选分子，单变量研究也已做完，接着研究机制的时便可使用到它。你需要了解你的分子目前已有哪些...

知存科技王绍迪:突破存储墙瓶颈，详解存算一体架构优势

智东西（公众号：zhidxcom）编辑|韦世玮智东西6月5日消息，近日，在落幕不久的GTIC2021嵌入式AI创新峰会上，知存科技CEO王绍迪博士以《存算一体AI芯片：AIoT设备的算力新选择》...

每日新闻播报(September 14)_每日新闻播报英文

AnOscarstatuestandscoveredwithplasticduringpreparationsleadinguptothe87thAcademyAward...

香港新巴城巴开放实时到站数据 供科技界研发使用

中新网3月22日电据香港《明报》报道，香港特区政府致力推动智慧城市，鼓励公私营机构开放数据，以便科技界研发使用。香港运输署21日与新巴及城巴（两巴）公司签署谅解备忘录，两巴将于2019年第3季度，开...

5款不容错过的APP: Red Bull Alert，Flipagram，WifiMapper

本周有不少非常出色的app推出，鸵鸟电台做了一个小合集。亮相本周榜单的有WifiMapper's安卓版的app，其中包含了RedBull的一款新型闹钟，还有一款可爱的怪物主题益智游戏。一起来看看我...

Qt动画效果展示_qt显示图片

今天在这篇博文中，主要实践Qt动画，做一个实例来讲解Qt动画使用，其界面如下图所示(由于没有录制为gif动画图片，所以请各位下载查看效果)：该程序使用应用程序单窗口，主窗口继承于QMainWindow...

如何从0到1设计实现一门自己的脚本语言

作者：dong...

三年级语文上册 仿写句子 需要的直接下载打印吧

描写秋天的好句好段1.秋天来了，山野变成了美丽的图画。苹果露出红红的脸庞，梨树挂起金黄的灯笼，高粱举起了燃烧的火把。大雁在天空一会儿写“人”字，一会儿写“一”字。2.花园里，菊花争奇斗艳，红的似火，粉...

C++|那些一看就很简洁、优雅、经典的小代码段

目录0等概率随机洗牌：1大小写转换2字符串复制...

二年级上册语文必考句子仿写，家长打印，孩子照着练

二年级上册语文必考句子仿写，家长打印，孩子照着练。具体如下：...

一年级语文上 句子专项练习(可打印)

...

亲自上阵!C++ 大佬深度“剧透”:C++26 将如何在代码生成上对抗 Rust?

...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.