前端和算法实现：给网站上加上自己的水印（简单+复杂）

一、简单

阿里巴巴内网的不可见水印用的是什么算法？

据说月饼事件截图的那位员工也被开除了？

下面的只是简单的加一个很浅的水印，实现起来很容易。

浏览器终端下粘贴下面的代码，

这样就可以加水印了。我选择了百度的首页，好像百度对这个有防护。

它的作用是在当前页面上增加了一个透明度只有0.005的很多的水印。水印内容“测试水印，1021002301，测试水印，DAHJDBJJdjsfsc”

使用QQ截图，这样一点也看不出来，有水印。

现在把图片放到PS里面，建一个图层在上面。全部填充为黑色，混合模式选择正片叠底这一类的（也就是让亮的更亮，暗的更暗），一个个试。。

当我试到“实色混合”和“颜色加深”的时候，水印就显示出来了。

哇，吓到我了，原来可以这么玩。

js代码：

(function(watermark){
    window.watermarkdivs = [];
    // 加载水印
    var loadMark = function(settings) {
            var defaultSettings={
                watermark_txt:"text",
                watermark_x:20,//水印起始位置x轴坐标
                watermark_y:20,//水印起始位置Y轴坐标
                watermark_rows:0,//水印行数
                watermark_cols:0,//水印列数
                watermark_x_space:50,//水印x轴间隔
                watermark_y_space:50,//水印y轴间隔
                watermark_color:‘#000000‘,//水印字体颜色
                watermark_alpha:0.005,//水印透明度，小于等于0.003,不可恢复到水印。
                watermark_fontsize:‘18px‘,//水印字体
                watermark_font:‘微软雅黑‘,//水印字体
                watermark_width:150,//水印宽度
                watermark_height:100,//水印长度
                watermark_angle:15,//水印倾斜度数
                // watermark_bg_color:‘yellow‘,
                watermark_bg_alpha:0.5 //加透明度导致隐形水印无法读取

            };
            //采用配置项替换默认值，作用类似jquery.extend
            if(arguments.length===1&&typeof arguments[0] ==="object" )
            {
                var src=arguments[0]||{};
                for(key in src)
                {
                    if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
                        continue;
                    else if(src[key])
                        defaultSettings[key]=src[key];
                }
            }

            var oTemp = document.createDocumentFragment();

            if (window.watermarkdivs && window.watermarkdivs.length > 0) {
                document.body.removeChild(document.getElementById("otdivid"));
                window.watermarkdivs = [];
            }

            //获取页面最大宽度
            var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
            //获取页面最大长度
            var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

            var otdiv = document.getElementById("otdivid");

            //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
            if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
                defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
                defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
            }
            //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
            if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
                defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
                defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
            }

            var x;
            var y;
            for (var i = 0; i < defaultSettings.watermark_rows; i++) {
                y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                    x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                    var mask_div = document.createElement(‘div‘);
                    mask_div.id = ‘mask_div‘ + i + j;
                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                    //设置水印div倾斜显示
                    mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.visibility = "";
                    mask_div.style.position = "absolute";
                    //选不中
                    mask_div.style.left = x + ‘px‘;
                    mask_div.style.top = y + ‘px‘;
                    mask_div.style.overflow = "hidden";
                    mask_div.style.zIndex = "9";
                    mask_div.style.pointerEvents = "none";
                    //mask_div.style.border="solid #eee 1px";
                    mask_div.style.opacity = defaultSettings.watermark_alpha;
                    mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                    mask_div.style.fontFamily = defaultSettings.watermark_font;
                    mask_div.style.color = defaultSettings.watermark_color;
                    mask_div.style.textAlign = "center";
                    mask_div.style.width = defaultSettings.watermark_width + ‘px‘;
                    mask_div.style.height = defaultSettings.watermark_height + ‘px‘;
                    mask_div.style.display = "block";
                    mask_div.style.fontWeight = "900";
                    oTemp.appendChild(mask_div);

                };
            };
            document.body.appendChild(oTemp);
        };

    watermark.load = function(settings) {
        window.onload = function() {
            loadMark(settings);
        };
        window.onresize = function() {
            loadMark(settings);
        };
    };
    watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，SDAHJDBJJdjsfsc" });
})(window.watermark = {});

html代码

<html>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="text/javascript" src="watermark.js"></script>
    <!--<script type="text/javascript">-->
        <!--watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，SDAHJDBJJdjsfsc" });-->
    <!--</script>-->

    <body>
        <div style="width:300px;height:300px;background-color: red; opacity:0.98;" onclick="alert(1);">test</div>
        <div style="width:300px;height:300px;background-color: blue;  opacity:0.9;" onclick="alert(2);">test</div>
        <a href="www.test.com"> baidu</a>
    </body>
</html>

二、复杂

频域制定数字盲水印

信号是有频率的，一个信号可以看做是无数个不同阶的正弦信号的的叠加。

上式为傅里叶变换公式，是指时域信号（对于信号我们说时域，因为是与时间有关的，而图像我们往往说空域，与空间有关），是指频率。

1、编码的目的有二，一是对水印加密，二控制水印能量的分布。以下是叠加数字盲水印的实验。

（1）原图像。尺寸300*240 ，汉子一枚，

（2）水印照片。

（3）水印编码。编码方式采用随机序列编码，通过编码，水印分布到随机分布到各个频率，并且对水印进行了加密。

（4）原图像频域。经历的是傅里叶变换，下图变换后的频域图像

（5）水印图像频域。经历的是傅里叶变换，下图变换后的频域图像

（6）合并水印和原图。之后，将叠加水印的频谱进行傅里叶逆变换，得到叠加数字水印后的图像，，将图像频域和水印编码进行合并。看不出来已经加了水印吧，哈哈哈

实际上，我们是把水印以噪声的形式添加到原图像中。

（7）水印图与原图的残差（看不出来残差区别，需要调整对比度才能看得出来）

（8）最终的均方差（MSE）和信噪比（PSNR）

（9）下图是原图频谱竖过来的样子，其能量主要集中在低频。

那么，为什么频谱发生了巨大的变化，而在空域却变化如此小呢？这是因为我们避开了图像的主要频率。

合并之后

（10）水印提取是水印叠加的逆过程，

(11)提取后，得到水印。

代码



clc;clear;close all;
alpha = 1;




%% read data
im = double(imread(‘G:\2017学习\000苏宁实习\Work\图片水印\test.jpg‘))/255;
mark = double(imread(‘G:\2017学习\000苏宁实习\Work\图片水印\watermark.png‘))/255;
figure, imshow(im),title(‘original image‘);
figure, imshow(mark),title(‘watermark‘);




%% encode mark
imsize = size(im);
%random
TH=zeros(imsize(1)*0.5,imsize(2),imsize(3));
TH1 = TH;
TH1(1:size(mark,1),1:size(mark,2),:) = mark;
M=randperm(0.5*imsize(1));
N=randperm(imsize(2));
save(‘G:\2017学习\000苏宁实习\Work\图片水印\encode.mat‘,‘M‘,‘N‘);
for i=1:imsize(1)*0.5
    for j=1:imsize(2)
        TH(i,j,:)=TH1(M(i),N(j),:);
    end
end
% symmetric
mark_ = zeros(imsize(1),imsize(2),imsize(3));
mark_(1:imsize(1)*0.5,1:imsize(2),:)=TH;
for i=1:imsize(1)*0.5
    for j=1:imsize(2)
        mark_(imsize(1)+1-i,imsize(2)+1-j,:)=TH(i,j,:);
    end
end
figure,imshow(mark_),title(‘encoded watermark‘);




%% add watermark
FA=fft2(im);
figure,imshow(FA);title(‘spectrum of original image‘);
FB=FA+alpha*double(mark_);
figure,imshow(FB); title(‘spectrum of watermarked image‘);
FAO=ifft2(FB);
figure,imshow(FAO); title(‘watermarked image‘);
%imwrite(uint8(FAO),‘watermarked image.jpg‘);
RI = FAO-double(im);
figure,imshow(uint8(RI)); title(‘residual‘);
%imwrite(uint8(RI),‘residual.jpg‘);
xl = 1:imsize(2);
yl = 1:imsize(1);
[xx,yy] = meshgrid(xl,yl);
figure, plot3(xx,yy,FA(:,:,1).^2+FA(:,:,2).^2+FA(:,:,3).^2),title(‘spectrum of original image‘);
figure, plot3(xx,yy,FB(:,:,1).^2+FB(:,:,2).^2+FB(:,:,3).^2),title(‘spectrum of watermarked image‘);
figure, plot3(xx,yy,FB(:,:,1).^2+FB(:,:,2).^2+FB(:,:,3).^2-FA(:,:,1).^2+FA(:,:,2).^2+FA(:,:,3).^2),title(‘spectrum of watermark‘);




%% extract watermark
FA2=fft2(FAO);
G=(FA2-FA)/alpha;
GG=G;
for i=1:imsize(1)*0.5
    for j=1:imsize(2)
        GG(M(i),N(j),:)=G(i,j,:);
    end
end
for i=1:imsize(1)*0.5
    for j=1:imsize(2)
        GG(imsize(1)+1-i,imsize(2)+1-j,:)=GG(i,j,:);
    end
end
figure,imshow(GG);title(‘extracted watermark‘);
%imwrite(uint8(GG),‘extracted watermark.jpg‘);




%% MSE and PSNR
C=double(im);
RC=double(FAO);
MSE=0; PSNR=0;
for i=1:imsize(1)
    for j=1:imsize(2)
        MSE=MSE+(C(i,j)-RC(i,j)).^2;
    end
end
MSE=MSE/360.^2;
PSNR=20*log10(255/sqrt(MSE));
MSE
PSNR
				


				
时间： 2024-10-12 08:54:43 

		


		


	

	
	

		


		
前端和算法实现：给网站上加上自己的水印（简单+复杂）的相关文章


						

		

			

                前端和算法实现：给网站上加上自己的水印（以后用上）
			

		

		

									

				watermark插件的github地址:https://github.com/saucxs/watermark 一.简单 阿里巴巴内网的不可见水印用的是什么算法? 下面的只是简单的加一个很浅的水印,实现起来很容易. 浏览器终端下粘贴下面的代码, 这样就可以加水印了.我选择了百度的首页,好像百度对这个有防护. 它的作用是在当前页面上增加了一个透明度只有0.005的很多的水印.水印内容"测试水印,1021002301,测试水印,DAHJDBJJdjsfsc" 使用QQ截图,这样一点也看不			

		

	

						

		

			

                K-近邻算法改进约会网站的配对效果
			

		

		

									

				摘自:<机器学习实战>,用python编写的(需要matplotlib和numpy库) 海伦一直使用在线约会网站寻找合适自己的约会对象.尽管约会网站会推荐不同的人选,但她没有从中找到喜欢的人.经过一番总结,她发现曾交往过三种类型的人: 1.不喜欢的人( 以下简称1 ): 2.魅力一般的人( 以下简称2 ): 3.极具魅力的人(以下简称3 ) 尽管发现了上述规律,但海伦依然无法将约会网站推荐的匹配对象归入恰当的分类.她觉得可以在周一到周五约会哪些魅力一般的人,而周末则更喜欢与那些极具魅力的人为伴			

		

	

				

		

			

                k-近邻算法改进约会网站配对效果
			

		

		

									

				k-近邻算法改进约会网站配对效果 一.理论学习 1. 阅读内容 请务必仔细阅读<机器学习实战>书籍第1章及第2章,本节实验通过解决约会网站配对效果问题来实战 k-近邻算法(k-Nearest Neighbour,KNN) 2. 扩展阅读 本节推荐内容可以辅助书中理论知识,比书中内容更容易理解,可以加深理论知识,请仔细阅读: 酷壳 - K Nearest Neighbor 算法 数据挖掘十大算法--K近邻算法 二.在线实验 1. 分析需求 我在约会网站看到的人,分为三类: 不喜欢的 一般喜欢的			

		

	

				

		

			

                前端工程师算法（一）
			

		

		

									

				算法是指解题方案的准确而完整的描述,是一系列解决问题的清晰指定,算法代表着用系统的方法描述解决问题的策略机制.这个解释来源于百度,对于入门来说这个解释等于白说了,你的一脸懵逼我懂,大神略过. 说人话 算法 你需要了解的算法是什么? 开始了解算法就应该对程序有一些认识和理解了,其实我们所有的程序可以理解为算法加数据结构.撇开数据结构不谈,我们日常写的代码如if-else.for(...)等就是算法.在数学里加减乘除是算法,方程公式,几何公式,乃至高数也都是算法,而我们的if-else.for(..			

		

	

				

		

			

                前端与算法 leetcode 350. 两个数组的交集 II
			

		

		

									

				目录 # 前端与算法 leetcode 350. 两个数组的交集 II 题目描述 概要 提示 解析 解法一:哈希表 解法二:双指针 解法三:暴力法 算法 # 前端与算法 leetcode 350. 两个数组的交集 II 题目描述 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5], nums2 = [9,4,9,8,4] 输出: [4,9] 说明			

		

	

				

		

			

                前端与算法 leetcode 283. 移动零
			

		

		

									

				[TOC] 前端与算法 leetcode 283. 移动零 题目描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作,不能拷贝额外的数组. 尽量减少操作次数. 283. 移动零 概要 这个问题属于 "数组变换" 的一个广泛范畴.这一类是技术面试的重点.主要是因为数组是如此简单和易于使用的数据结构.遍历或表示不需要任何样板代码,而且大多数			

		

	

				

		

			

                吴裕雄--天生自然python机器学习：使用K-近邻算法改进约会网站的配对效果
			

		

		

									

				在约会网站使用K-近邻算法 准备数据:从文本文件中解析数据 海伦收集约会数据巳经有了一段时间,她把这些数据存放在文本文件(1如1^及抓 比加 中,每 个样本数据占据一行,总共有1000行.海伦的样本主要包含以下3种特征: 每年获得的飞行常客里程数 玩视频游戏所耗时间百分比 每周消费的冰淇淋公升数 将文本记录到转换NumPy的解析程序 import operator from numpy import * from os import listdir def file2matrix(filenam			

		

	

				

		

			

                前端排序算法总结；前端面试题2.0；JavaScript异步编程
			

		

		

									

				1.前端 排序算法总结 排序算法可能是你学编程第一个学习的算法,还记得冒泡吗? 当然,排序和查找两类算法是面试的热门选项.如果你是一个会写快排的程序猿,面试官在比较你和一个连快排都不会写的人的时候,会优先选择你的.那么,前端需要会排序吗?答案是毋庸置疑的,必须会.现在的前端对计算机基础要求越来越高了,如果连排序这些算法都不会,那么发展前景就有限了.本篇将会总结一下,在前端的一些排序算法. https://segmentfault.com/a/11... 2.前端面试题 V2.0 详见: 这是一份			

		

	

				

		

			

                android如果给imageview做圆角，如果在原有的bitmap上加上一些修饰的drawable
			

		

		

									

				先上效果图: Layout文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"