web应用增加水印

原创

已于 2024-06-20 14:43:42 修改 · 498 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-05-21 17:14:27 首次发布

需求背景

当前在做的项目客户那边有需求需要增加水印，防止员工通过截图或者录屏泄露敏感信息，类似企业微信如下图

需求调研

搜了一下实现web应用水印的方案大致分为几类，

1.使用背景图片 repeat

2.使用canvas绘制

3.js计算等

都感觉比较麻烦

功能实现

思路是直接在body下加一个div 在div内循环span 添加水印内容。让当前这个div 处于 index最高层。会出现一个问题最高层的div会遮盖主页面导致页面上的操作失效。解决这个问题可以使用css的 pointer-events: none; 属性，禁止掉div的所有事件。代码如下

演示地址

<!DOCTYPE html>
<html lang="en">
	<head></head>
	<body>
		<div class="box-green">
			<a href="https://www.baidu.com/">跳转到百度</a>
		</div>
		<div class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bangleilei

关注关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

web页面水印实现

m0_65937359的博客

03-09

2241

对于页面水印的实现思路是：创建一个元素，让他浮在页面最上层，让他有种蒙了一层水印的效果水印的效果我们可以给这个元素一个背景图(background-image)，背景图就用svg生成。具体实现如下：创建水印元素让他浮在最上层 <style> #water-mark { height: 100%; width: 100%; z-index: 999999; position: fixed; left: 0; top: 0; po

网站页面水印效果的实现（上）：页面水印的添加

java web

09-07

3222

在web项目中，经常能够看到类似于全站页面都被添加了水印的效果。我将分两期，给大家介绍一下，一个简单的水印组件的构建过程，分别是水印信息的添加和防篡改。这一期，先来介绍水印信息的添加，也就是如何创建一个水印组件，能够像ant design框架的watermark组件一样，可以灵活方便的应用到指定区域。

参与评论您还未登录，请先登录后发表或查看评论

web页面添加水印-自定义

07-01

一个js方法，用于生成水印文字。在页面直接引用，可自定义水印文字。代码已经打包，可以直接使用。原生js包装，已经解决大部分问题，可以直接使用。

前端如何给网页增加水印？并且如何防止水印被移除？

最新发布

weixin_45422672的博客

09-22

778

前端防移除水印方案摘要：基础实现：通过Canvas生成水印图片或CSS渐变方式创建全屏水印层，设置z-index和pointer-events确保不影响页面交互。防护机制：使用MutationObserver监听DOM变化，水印被移除时自动重建定时检查水印可见性，防止被隐藏创建多层水印叠加，增加移除难度监听样式属性变更，阻止display/opacity修改强化措施：结合定时器进行周期性校验防止通过控制台操作移除水印实现多层级防御体系（字数：149）

探秘 Web 水印技术

Huangjiazhen711的博客

09-14

1063

Web 水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印），本文将分别予以介绍，带你探秘 web 水印技术。

web系统添加水印

hua_ed的专栏

02-23

670

目录实现：配置页面变动后重绘实现：第三方github地址：https://github.com/saucxs/watermark-dom const userIp = d.userIp ? ", " + d.userIp: ""; // 获取用户IP const dateString = new Date().toLocaleString({}, { hour12: false }); // 计算时间 let zone = -new Date().getTimezoneOffset

web系统添加盲水印

月月鸟先森的博客

11-26

1261

为增加系统安全性，避免重要敏感信息通过截图方式泄露，对web页面增加盲水印标识，标注系统名称，登陆人，当前时间等信息，这里的盲水印指肉眼不可见的html水印。

精选资源

springboot实现上传图片添加水印

12-21

在Spring Boot框架中实现图片上传并添加水印的功能，是一个常见的需求，特别是在开发涉及多媒体内容的Web应用时。下面将详细介绍这个过程，并涵盖相关的技术点。首先，我们需要了解Spring Boot如何处理文件上传。...

精选资源

javascript添加背景水印

03-12

JavaScript是一种广泛应用于Web开发的脚本语言，尤其在前端领域，它被用来为网页增加交互性和动态效果。在这个场景中，我们关注的是如何使用JavaScript在网页背景上添加水印效果。"watermark.js"文件很可能就是一个...

如何给web页面添加一个水印

胖蔡叨叨叨

09-08

2145

web-水印

weixin_43843679的博客

03-01

472

//最外面div加或需要水印得部分加 <div id="mainTable"></div> import waterMark from '../../common/js/waterMark.js'; export default { mixins: [waterMark], mounted() { this.canvasWMByWMConfig('PASSENGE_FLOW_EPIDEMIC_EN', this, { selector: '#mainTabl

web给图片加水印

farmerXU的博客

10-09

407

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>给图片加水印</title> </head> <body> <canvas id="shuiyinTest"&g.

Web 页面如何添加水印？

rqgxy的博客

05-22

2264

1、代码开发版实现方法常规代码实现思路是： 1）web 页面加载后，通过 javascript 创建页面元素 div，并在 div 元素中创建文本节点，展示水印内容 2）设置 div 元素样式，将其 zIndex 设置一个较高的值，并设置透明度，实现浮在页面的水印效果代码开发时需要考虑页面自适应时宽高改变的情况，同时还需要保证不能影响页面的原有事件功能，需要综合考虑的细节比较多。 2、懒人版实现方法使用内置水印功能的报表工具，通过简单属性配置完成水印效果。 1）文字水印实现可以通过配

web水印

计算机视觉之光

01-17

1783

WEB页面的全屏添加水印

weixin_55712711的博客

10-15

509

查了好多资料，说都是写的假的全屏，于是我费尽心思写了一个F11+el-drawer，制造了一个全屏的假象。需求就是一个视频，全屏播放的时候加上文字水印。PC端实现方法就如上啦！

web端加水印，比较方便

lcyfpp的专栏

08-16

357

添加水印功能，代码侵入少，使用起来简单方便！

web明水印

极简

05-26

518

一、功能点水印文本自定义水印文本颜色自定义水印旋转角度自定义水印覆盖随容器自适应水印背景穿透

蓝桥杯web应用开发图片水印

03-18

### 蓝桥杯 Web 应用开发中的图片水印技术方案在蓝桥杯 Web 应用开发比赛中，实现图片水印功能是一个常见的需求。以下是关于如何通过编程方式实现这一目标的技术方案。 #### 1. 技术选型为了实现图片水印功能，可以采用 Java 的图像处理库 `javax.imageio` 和 `java.awt.Graphics2D` 来完成操作[^1]。这些工具提供了强大的图形绘制能力，能够轻松地将文字或另一张图片作为水印嵌入到原始图片上。 #### 2. 基本原理图片水印的核心在于利用图像叠加技术，在原图的基础上绘制额外的内容（如文字或标志）。具体来说，可以通过以下步骤来实现： - 加载源图片并创建一个新的缓冲区用于绘图。 - 设置透明度参数以便让水印看起来不那么突兀。 - 将指定的文字或者图标放置于适当位置，并调整其大小和颜色以匹配整体设计风格。 #### 3. 示例代码下面提供了一段简单的 Java 代码示例，展示如何向一张图片添加文本形式的水印： ```java import java.awt.*; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import java.io.File; public class ImageWatermark { public static void main(String[] args) throws Exception{ String inputImagePath = "input.jpg"; // 输入文件路径 String outputImagePath = "output_with_watermark.jpg"; // 输出带水印后的文件名 BufferedImage originalImage = ImageIO.read(new File(inputImagePath)); Graphics2D g2d = (Graphics2D) originalImage.getGraphics(); AlphaComposite alphaChannel = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f); g2d.setComposite(alphaChannel); Font font = new Font("Arial", Font.BOLD, 48); g2d.setFont(font); Color color = new Color(255, 255, 255); // 白色字体 g2d.setColor(color); int stringWidth = g2d.getFontMetrics().stringWidth("Sample Watermark"); int stringHeight = g2d.getFontMetrics().getAscent(); int xCoordinate = (originalImage.getWidth() - stringWidth)/2; int yCoordinate = originalImage.getHeight()-stringHeight/2; g2d.drawString("Sample Watermark", xCoordinate ,yCoordinate ); g2d.dispose(); ImageIO.write(originalImage,"jpg",new File(outputImagePath)); } } ``` 此代码片段展示了如何读取输入图片、设置画布属性、定义字体样式与尺寸、设定颜色及透明度级别，最后保存带有新加入水印效果的新版本图片。对于更复杂的场景比如批量处理PDF文档内的每一页都需要加上特定公司LOGO作为背景图案，则需要用到专门针对PDF格式的支持库例如 PDFBox 或 Documents4j 等开源框架来进行深入定制化开发工作[^2]。 #### 4. 注意事项当参与竞赛时需要注意时间管理和资源优化问题；确保所选用算法效率足够高从而满足实时性要求的同时也要兼顾最终视觉呈现质量的好坏程度。