前端和算法实现:给网站上加上自己的水印(以后用上)

Posted 成长中的小牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端和算法实现:给网站上加上自己的水印(以后用上)相关的知识,希望对你有一定的参考价值。

watermark插件的github地址:https://github.com/saucxs/watermark

一、简单

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

 

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

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

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

 

      它的作用是在当前页面上增加了一个透明度只有0.005的很多的水印。水印内容“测试水印,1021002301,测试水印,DAHJDBJJdjsfsc
 
 
使用QQ截图,这样一点也看不出来,有水印。
 
 
现在把图片放到PS里面,建一个图层在上面。全部填充为黑色,混合模式选择正片叠底这一类的(也就是让亮的更亮,暗的更暗),一个个试。。
 
当我试到“实色混合”和“颜色加深”的时候,水印就显示出来了。
 

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

 js代码:
 
 
 View Code

html代码

 View Code

 

写了插件,这个是测试地址

http://www.chengxinsong.cn/watermark_test/

包括,测试,重置,显示,随机,四个部分。

特性:1、测试对水印参数属性,重置水印属性参数,显示此时的水印属性参数,随机产生水印属性参数;

2、水印按钮组是position值fixed,可以浮现在页面之上,不占字节。

3、对系统的各个部分页面进行水印的测试。

 

二、复杂

频域制定数字盲水印

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

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

 

 

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学习\\Work\\图片水印\\test.jpg\'))/255;
mark = double(imread(\'G:\\2017学习\\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学习\\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

复制代码

  

转自http://www.cnblogs.com/chengxs/p/6762380.html

以上是关于前端和算法实现:给网站上加上自己的水印(以后用上)的主要内容,如果未能解决你的问题,请参考以下文章

通过前端js给远程PDF文件加水印

浅谈前端水印

前端基于dom或者canvas实现页面水印

前端小程序——js+canvas 给图片添加水印

如何用java写一个给excel加水印程序,求源码!!!!!

vue 实现打印功能,打印的时候加上水印图片