web应用增加水印

bangleilei

已于 2024-06-20 14:43:42 修改

阅读量439

点赞数 5

CC 4.0 BY-SA版权

分类专栏：水印文章标签：前端 javascript html

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

本文链接：https://blog.youkuaiyun.com/banglei123/article/details/139097027

需求背景

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

需求调研

搜了一下实现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元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bangleilei

关注关注

5
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

探秘 Web 水印技术

Huangjiazhen711的博客

09-14

936

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

web系统添加水印

hua_ed的专栏

02-23

639

目录实现：配置页面变动后重绘实现：第三方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页面添加水印-自定义

07-01

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

前端水印实现指南

最新发布

liangshanbo1215的博客

06-26

1221

前端水印是一种在网页内容上叠加半透明文字或图片的技术，主要用于版权保护、防截图和溯源追踪。以下是几种常见的前端水印实现方式及其优缺点分析。

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

胖蔡叨叨叨

09-08

2102

web-水印

weixin_43843679的博客

03-01

449

//最外面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

springboot实现上传图片添加水印

12-21

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

鸿蒙应用开发（HarmonyOS）页面添加水印以及保存图片时添加水印的功能

adaedwa187545的博客

11-21

1380

在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。

javascript添加背景水印

03-12

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

web给图片加水印

farmerXU的博客

10-09

395

<!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

2243

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

web水印

计算机视觉之光

01-17

1767

web端加水印，比较方便

lcyfpp的专栏

08-16

336

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

WEB页面的全屏添加水印

weixin_55712711的博客

10-15

450

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

web页面水印实现

m0_65937359的博客

03-09

2158

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

web明水印

极简

05-26

483

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

web图片加水印

JS小学生的博客

09-17

859

在前端给图片加水印的方法有很多种：法一：js+canvas，使用H5新增元素canvas（画布）加水印。使用此方法，用户可以在页面上自定义水印内容。代码如下： <body> <canvas id="shuiyinTest" width="500" height="500"></canvas> <!--画布，图片放在此处--...

MapXtreme Web版去除水印教程

"本文将介绍如何在MapXtreme Web地图应用中隐藏烦人的水印。MapXtreme是一款强大的GIS（地理信息系统）工具，但其Web版本可能会显示默认的水印，影响用户体验。通过遵循以下提供的修改步骤，你可以有效地隐藏水印，...