给你的web页面添加盲水印，附带检盲水印方案

article/2025/11/7 13:37:17

应用场景

在一些敏感系统有的时候我们为了防止别人截图或追溯图片源头是谁发的。我们需要在页面上埋下我们的隐形水印。

开始做

埋水印

  1. github上有很多水印的js插件，download下来一个改一改，源码见最后附录。
    改动内容：增加了判断dom被人为修改的检测机制， 优化了dom渲染机制。增加透明水印
  2. 引入WaterMark js模块，
  3. 初始化waterMark.init(0) // 0: 默认出现显性水印和隐形水印。 1 只要隐性水印初始化waterMark.init(0) // 0: 默认出现显性水印和隐形水印。 1 只要隐性水印
  4. 效果如图：
    在这里插入图片描述

检水印工具

这里需要用到css3的mix-blend-mode: color-burn;（颜色混合模式：颜色加深）
参照张鑫旭的混合模式的文档

  1. 做一个前端选择图片展示的功能（我这里直接用了element-ui的控件）
    在这里插入图片描述
  2. 选择图片转换成base64填充一个img标签，然后同级放一个div标签蒙层
    在这里插入图片描述
  3. 写上样式
.imgshadow {width: 100%;height: 100%;max-width: 820px;background: #000;mix-blend-mode: color-burn;  //色彩混合模式position: absolute;top: 0;left: 0;
}

4.看看效果
在这里插入图片描述
(PS: 如果你的页面不是白底的，需要自己计算一下对应的文本的颜色)
附录源码：


//mode  0: 默认出现显性水印和隐形水印。 1 只要隐性水印
var init = function(mode){var n = document.cookie.match('(^|;)?loginName=([^;]*)(;|$)')||document.cookie.match('(^|;)?username=([^;]*)(;|$)');var gOaName = n?n[2]:'devTest';var wmTop = window.top;var div  = document.createElement('div')div.id = "idmast"document.body.appendChild(div)var total = [];var onresize = false;!function(host){if(host.WMJS || wmTop.WMJS) return;host.WMJS = function () {var isIE9 = document.all && document.addEventListener && !window.atob;var front_rows0,front_cols0,front_rows1,front_cols1,front_x=0,   //x轴间距front_y=0,    //Y轴间距original_front_rows=0,original_front_cols=0,// original_front_x_space=120, //x轴密度// original_front_y_space=100, //Y轴密度original_front_x_space=100, //x轴密度original_front_y_space=80, //Y轴密度mask_txt= gOaName,  //水印字---------rtxcolor='#2e3035',   //字体颜色front_txt_alpha=0.1, //字体透明度 0~1font_size='18px',      //字体大小front_font='Helvetica Neue',  //字体width=60,  //宽间距height=50, //高间距angle=35 //字体倾斜度;function remove_old_watermask_0(){for (var i = 0; i <= front_rows0; i++) {for (var j = 0; j <= front_cols0; j++) {var rmElm=document.getElementById('mask_0_elem'+i+j);if(rmElm){rmElm.parentNode.removeChild(rmElm);// console.log('rm'+rmElm);}}}}function remove_old_watermask_1(){for (var i = 0; i <= front_rows1; i++) {for (var j = 0; j <= front_cols1; j++) {var rmElm=document.getElementById('mask_1_elem'+i+j);if(rmElm){rmElm.parentNode.removeChild(rmElm);// console.log('rm'+rmElm);}}}}function getRotation(deg) {var deg2rad = Math.PI * 2 / 360;var rad = deg * deg2rad;var costheta = Math.cos(rad);var sintheta = Math.sin(rad);var M11 = costheta;var M12 = -sintheta;var M21 = sintheta;var M22 = costheta;return [M11,M12,M21,M22];}return {watermark: function (type) { eval('remove_old_watermask_'+type+'()')var oTemp = document.createDocumentFragment();if(type == 1){oTemp = div}var front_x_space=original_front_x_space;var front_y_space=original_front_y_space;var front_cols, front_rowsfront_rows=original_front_rows;front_cols=original_front_cols;if(type == 1){front_x_space = 60;front_y_space = 40;width = 40;height= 20;front_txt_alpha = 0.005font_size = '14px'}else{front_x_space = 100;front_y_space = 80;front_txt_alpha = 0.1;width = 60;height= 50;font_size = '18px'              }var max_width=window.innerWidth- 45;var max_height= window.innerHeight-45;if(front_cols==0||(parseInt(front_x+width*front_cols+front_x_space*(front_cols-1))> max_width)){front_cols=parseInt((front_x_space+max_width - front_x)/(width+front_x_space));front_x_space=parseInt(((max_width - front_x)-width*front_cols)/(front_cols-1));if(!front_x_space){front_x_space=0;}}if(front_rows==0||(parseInt(front_y+height*front_rows+front_y_space*(front_rows-1))> max_height)){front_rows  =parseInt((front_y_space+max_height - front_y)/(height+front_y_space));front_y_space=parseInt(((max_height - front_y)-height*front_rows)/(front_rows-1));if(!front_y_space){front_y_space=0;}}if(type == 1){front_rows1 = front_rowsfront_cols1 = front_cols}else{front_rows0 = front_rowsfront_cols0 = front_cols}var mask_elem=document.createElement('div');var M=getRotation(-angle);mask_elem.id='mask_elem00';mask_elem.className = 'isecui-mask-'+typemask_elem.appendChild(document.createTextNode(mask_txt));mask_elem.style.webkitTransform = "rotate(-"+angle+"deg)";mask_elem.style.MozTransform = "rotate(-"+angle+"deg)";mask_elem.style.msTransform = "rotate(-"+angle+"deg)";mask_elem.style.OTransform = "rotate(-"+angle+"deg)";mask_elem.style.transform = "rotate(-"+angle+"deg)";mask_elem.style.visibility="";mask_elem.style.position="fixed";mask_elem.style.pointerEvents="none";// 鼠标穿透，这个避免按钮被遮盖点不了mask_elem.style.left=front_x+'px';mask_elem.style.top=front_y+'px';mask_elem.style.overflow="hidden";//mask_elem.style.border="solid #eee 1px";mask_elem.style.opacity=front_txt_alpha;if(isIE9){mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+")";}else{mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+") progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+M[0]+", M12="+M[1]+", M21="+M[2]+", M22="+M[3]+")";}mask_elem.style.fontSize=font_size;mask_elem.style.fontFamily=front_font;mask_elem.style.color=color;mask_elem.style.textAlign="center";//mask_elem.style.width=width+'px';//mask_elem.style.height=height+'px';mask_elem.style.display="block";oTemp.appendChild(mask_elem);var x;var y;for (var i = 0; i < front_rows; i++) {y=front_y+(front_y_space+height)*i;for (var j = 0; j < front_cols; j++) {x=front_x+(width+front_x_space)*j;if(i!=0 || j!=0){//clonevar new_elem=mask_elem.cloneNode(true);new_elem.id='mask_'+type+'_elem'+i+j;new_elem.style.left=x+'px';new_elem.style.top=y+'px';oTemp.appendChild(new_elem);}};};document.body.appendChild(oTemp);total[type] = eval('front_rows'+type+'*front_cols'+type)setTimeout(function(){onresize = false})}};}();var __w_f = function(){var f = host.WMJS.watermark;if(!__w_f.__w_t){f(1);if(!mode){f(0);} __w_f.__w_t = setTimeout(function(){__w_f.__w_t = null;},500);}};host.onresize = function(){__w_f('onresize');onresize = trueconsole.log('watermak resize1');};host.onload = function(){__w_f('onload');console.log('watermak onload');};var waterMarkTimer = setInterval(function(){var mask0 = document.getElementsByClassName('isecui-mask-0').length;var mask1 = document.getElementsByClassName('isecui-mask-1').length;var hide = document.querySelector('.__web-inspector-hide-shortcut__')if(hide){window.location.reload()}if(((total[0]&&total[0]>mask0)||(total[1]&&total[1]>mask1))&&!onresize){window.location.reload()}},1000)}(window);
}export default {init,name :'WaterMark'
}

http://chatgpt.dhexx.cn/article/IWEQAN2c.shtml

相关文章

有意思的数字盲水印的简单的实现。

有意思的数字盲水印的简单的实现。

早期大约是10年前从一本数字图像处理上看到过数字水印的概念&#xff0c;觉得确实一种很有意思的东西&#xff0c;那个时候主要就是基于LSB的图像信息的隐藏&#xff0c;这种在空域里的方法有较大的缺陷&#xff0c;鲁棒性是比较差的。随便一个后期的都会造成水印的丢失&#x…
阅读更多...
python脚本实现盲水印提取和添加

python脚本实现盲水印提取和添加

python脚本实现盲水印提取和添加 首先github上找个BlindWaterMark-master文件下载一下&#xff0c;打开后是我这个样子 在python里面添加两个库&#xff0c;python.exe目录上方输入cmd pip install opencv-python python.exe -m pip install matplotlib新手这里装库的时候&am…
阅读更多...
文字隐写术-盲水印研究笔记

文字隐写术-盲水印研究笔记

gitee 开源代码(java) shuiyin: blind watermark 盲水印技术实现 java 实现版权保护 - Gitee.comhttps://gitee.com/chejiangyi/shuiyin/tree/master 需求概述 研究盲水印对于版权保护的效果和能力 研究尝试概述 水印实现: 大部分的python或者java算法都基于频域的盲水印效果…
阅读更多...
web系统添加盲水印

web系统添加盲水印

前言 为增加系统安全性&#xff0c;避免重要敏感信息通过截图方式泄露&#xff0c;对web页面增加盲水印标识&#xff0c;标注系统名称&#xff0c;登陆人&#xff0c;当前时间等信息&#xff0c;这里的盲水印指肉眼不可见的html水印 增加水印 引入watermark.js调用 watermar…
阅读更多...
【OpenCV 例程 300篇】219. 添加数字水印（盲水印）

【OpenCV 例程 300篇】219. 添加数字水印（盲水印）

OpenCV 例程200篇 总目录 【youcans 的 OpenCV 例程 300篇】219. 添加数字水印&#xff08;盲水印&#xff09; 8.2 添加数字盲水印 数字水印&#xff0c;是指将特征信息嵌入音频、图像或是视频等数字信号中。 数字水印分为明水印和盲水印&#xff08;blind watermark&#…
阅读更多...
照片里的盲水印

照片里的盲水印

这个题是安恒月赛里面的一道misc类型的题&#xff0c;在CTF中misc所谓最考验你的脑洞和检验你的赛事水平&#xff08;赛棍&#xff1f;&#xff1f;&#xff1f;&#xff09; 但是这个方面还是要看一下&#xff0c;就当做开发脑力了。 题目&#xff1a;暴力可解 题目文件 下载…
阅读更多...
[python] 基于blind-watermark库添加图片盲水印

[python] 基于blind-watermark库添加图片盲水印

blind-watermark是一个能够给图片添加/解析基于频域的数字盲水印的Python库。图像水印image watermark是指在图片里添加文本或图形&#xff0c;以标记图片的来源。但是图像水印会破坏原图。因此另外一种水印形式&#xff0c;即图像盲水印blind image watermark在实践中更多地用…
阅读更多...
图片盲水印软件

图片盲水印软件

bulid_watermark_gui Blind&Invisible Watermark &#xff08;图片盲水印&#xff0c;提取水印无须原图&#xff01;) 增加图形界面 项目地址&#xff1a;github开源 软件下载地址&#xff1a;无需环境软件下载 how to use pip install -r requirements.txt 运行main.py…
阅读更多...
隐写术（盲水印）：从入门到出门

隐写术（盲水印）：从入门到出门

0. 前言 我在做 Blind Watermark 这个库的时候&#xff0c;翻阅了大量材料&#xff0c;学到了关于隐写术、盲水印的很多知识&#xff0c;现在梳理了一遍&#xff0c;发出来。 本文结构&#xff1a; 简介&#xff1a;隐写术的应用场景、分类、特点隐写术&#xff1a;介绍几种…
阅读更多...
图片隐写，盲水印，加密logo

图片隐写，盲水印，加密logo

1.定义 隐写术算是一种加密技术&#xff0c;权威的 wiki 说法是“ 隐写术是一门关于信息隐藏的技巧与科学&#xff0c;所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。” example&#xff1a; 钱图&#xff08;钱上面的水印&#xff0…
阅读更多...
CTF盲水印详解

CTF盲水印详解

原创稿件征集 邮箱&#xff1a;eduantvsion.com QQ&#xff1a;3200599554 黑客极客技术、信息安全热点安全研究分析等安全相关的技术文章 稿件通过并发布还能收获 200-800元不等的稿酬 前言 在CTF杂项题型中&#xff0c;盲水印的出现频率是相当高的&#xff0c;但大多数人处于…
阅读更多...
盲水印(Blind-WaterMark)

盲水印(Blind-WaterMark)

盲水印是一种肉眼不可见的水印方式&#xff0c;对图片资源使用图片盲水印或者文字水印&#xff0c;借此避免数字媒体未经授权的复制和拷贝&#xff0c;可通过对原图进行解码操作&#xff0c;得到水印图来证明版权归属。 这类盲水印是怎样实现的呢&#xff1f;原理并不复杂&…
阅读更多...
Windows系统通过CMD连接MySql

Windows系统通过CMD连接MySql

1.按压WindowsR快捷键后输入"cmd" 2.点击"确定"按钮后打开命令行 3.通过输入"cd"MySql安装的bin目录&#xff0c;按压"Enter"后进入MySql安装的bin目录 4.输入"mysql -h localhost -u root -p"&#xff0c;此处-h后为对应ho…
阅读更多...
cmd中无法连接MySQL

cmd中无法连接MySQL

本人电脑是win10系统&#xff0c;安装的是MySQL5.7版本的&#xff0c;最近在登录MySQL的时候老师出现下面的错误&#xff0c;有的时候重启电脑耶也会出现这样的情况 1.先检查你的环境变量是否配置好了&#xff1b; &#xff08;如果没有配置好&#xff0c;请参考一下的步骤&am…
阅读更多...
如何使用cmd安装MySQL

如何使用cmd安装MySQL

步骤一&#xff1a; 在官网MySQL&#xff1a; 点击download显示下载页面&#xff1a; 点击 MySQL community download&#xff08;这个适个人合开发者&#xff0c;免费的&#xff0c;之前的MySQL Enterprise Edition是企业版付费需要 &#xff0c;MySQL cluster CGE 是免费版但…
阅读更多...
navicat或者cmd远程连接mysql数据库

navicat或者cmd远程连接mysql数据库

问题产生&#xff1a; 一般情况下&#xff0c;MySql数据库是不允许进行远程连接操作的&#xff0c;强行使用Navicat连接会报出下面的错误。 服务器连接错误主机XXX不允许连接到此的MySQL的服务器 方法步骤&#xff1a; 1、远程登录授权 在服务器端进行操作&#xff0c;下…
阅读更多...
cmd窗口无法连接MySQL的解决方法

cmd窗口无法连接MySQL的解决方法

1.将下载Mysql中的bin目录的路径配置到Path环境变量中&#xff1b; 2.winR&#xff0c;输入services.msc&#xff0c;到服务窗口找到mysql服务&#xff0c;其中mysql的服务名可能是mysqlxx而不是mysql&#xff0c;比如我的是mysql80&#xff0c;找到之后点击&#xff0c;然后在…
阅读更多...
cmd启动MySQL

cmd启动MySQL

命令行启动MySQL step1&#xff1a;打开命令行&#xff1a;win R step2&#xff1a;输入如下命令&#xff0c;root与1234分别为MySQL的用户名与密码 mysql -uroot -p1234出现如下信息即为启动成功 如果连接失败 显示如下错误信息&#xff1a; ERROR 2003 (HY000): Cant …
阅读更多...
cmd的mysql命令_MySQL cmd命令

cmd的mysql命令_MySQL cmd命令

1.MySQL 登录： mysql -h localhost -u root -p test Enter password: ***** -h 指定数据库主机名，默认时登录主机。-u指定用户名(即安装数据库时的设置的用户名)。-p指明登录需要密码，如果没有密码，可省略-p参数。 -p 后面的test并不是密码，而是要登录的数据库名。如果-p后…
阅读更多...
cmd命令创建连接MySQL数据库

cmd命令创建连接MySQL数据库

欢迎大家关注我的公众号【老周聊架构】&#xff0c;Java后端主流技术栈的原理、源码分析、架构以及各种互联网高并发、高性能、高可用的解决方案。 一、连接MYSQL 格式&#xff1a; mysql -h 主机地址 -u 用户名 -p 用户密码1、 连接到本机上的MYSQL。 首先打开DOS窗口&#…
阅读更多...
推荐文章

Copyright @ 2022~2023