摘要：尺寸，漢子一枚，水印照片。經(jīng)歷的是傅里葉變換，下圖變換后的頻域圖像合并水印和原圖。之后，將疊加水印的頻譜進(jìn)行傅里葉逆變換，得到疊加數(shù)字水印后的圖像，，將圖像頻域和水印編碼進(jìn)行合并。

插件github地址：https://github.com/saucxs/wat... 有詳細(xì)的使用步驟，可以參考，不會(huì)用請(qǐng)留言，感覺可以，請(qǐng)給個(gè)星星。

阿里巴巴內(nèi)網(wǎng)的不可見水印用的是什么算法？
據(jù)說月餅事件截圖的那位員工也被開除了？

下面的只是簡單的加一個(gè)很淺的水印，實(shí)現(xiàn)起來很容易。

隨便找一個(gè)網(wǎng)站，比如就找掘金的個(gè)人首頁，

（1）F12檢查模式，

（2）在console里粘貼下面的代碼，

(function(watermark){window.watermarkdivs=[];var loadMark=function(settings){var defaultSettings={watermark_txt:"text",watermark_x:20,watermark_y:20,watermark_rows:0,watermark_cols:0,watermark_x_space:50,watermark_y_space:50,watermark_color:"#000000",watermark_alpha:0.005,watermark_fontsize:"18px",watermark_font:"微軟雅黑",watermark_width:150,watermark_height:100,watermark_angle:15,watermark_bg_alpha:0.5};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");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))}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
（3）改變一下頁面窗口大小，然后就可以看到我首頁出現(xiàn)如下圖的水印，一層淺淺的水印

它的作用是在當(dāng)前頁面上增加了一個(gè)透明度只有0.005的很多的水印。水印內(nèi)容“測(cè)試水印，saucxs，測(cè)試水印，songEagle，工號(hào)等”。
2、水印的優(yōu)化
當(dāng)然是需要使用者不知道這個(gè)頁面有水印，保證一些信息的安全性以及泄露之后可以追蹤到是誰在泄露機(jī)密信息，他沒有發(fā)覺到有水印，所以需要將水印調(diào)成透明度很低，這樣使用者看不到水印，但是一旦使用者截圖將圖片發(fā)布到互聯(lián)網(wǎng)上，這時(shí)候只需要將圖片進(jìn)行一些簡單操作就可以讓水印重新顯現(xiàn)出來。
只要使用者不知道有水印存在，這樣就是從根本上加了水印，信息的源頭上加了水印，確保信息的安全，以及泄露之后的追蹤。
我們還是拿掘金的個(gè)人首頁作為試驗(yàn)田。這回我們將水印的透明度調(diào)成0.004，水印字體顏色調(diào)成頁面背景顏色（掘金的是#f4f5f5），然后截圖（這回看不出來有水印吧）

把圖片放到PS，我使用的是ps cs6里面，建一個(gè)空白圖層在上面，填充為黑色，操作：如圖所示背景色選擇黑色，然后按shift+f5，選擇背景色進(jìn)行填充。

混合模式選擇正片疊底這一類的（也就是讓亮的更亮，暗的更暗），一個(gè)個(gè)試。當(dāng)我試到“實(shí)色混合”和“顏色加深”的時(shí)候，水印就顯示出來了。
哇，嚇到我了，原來可以這么玩。
3、watermark-dom水印原理分析
通過js向html中一次性添加dom元素，所以我取名叫做watermark-dom，如果一旦知道有這個(gè)水印插件，使用者是可以手動(dòng)將當(dāng)前頁面的水印dom刪掉，這樣也就是開發(fā)人員知道怎么弄，對(duì)于其他人員還是不知道如何去掉頁面水印的。
3.1關(guān)鍵元素1--pointer-events:none
這個(gè)歸功于css的屬性，準(zhǔn)確的說是css3的一個(gè)屬性pointer-events，本來這個(gè)屬性的而設(shè)計(jì)之初是為了--真正意義上的禁用元素，因?yàn)樵O(shè)置值為none的時(shí)候，這個(gè)元素是使用鼠標(biāo)或者觸摸感知不到的，可以稱pointer-events為“元素虛化”。
支持瀏覽器：目前FireFox瀏覽器，Chrome都支持。Opera以及IE不支持。
該屬性的缺點(diǎn)：
1、pointer-events:none影響觸屏設(shè)備的滾動(dòng)，如無線端頁面等；
2、如果子元素設(shè)置了pointer-eventes: auto會(huì)導(dǎo)致滾動(dòng)的時(shí)候頁面閃動(dòng)
3.2關(guān)鍵元素2--opacity屬性
為什么這么說opacity屬性，因?yàn)檫@個(gè)屬性是對(duì)元素進(jìn)行透明的設(shè)置，因?yàn)槭撬。ＭM量不影響到正常頁面的視覺體驗(yàn)。
支持瀏覽器：所有瀏覽器都支持 opacity 屬性。注意：IE8以及更早的版本支持替代的filter屬性。例如：filter:Alpha(opacity=50)。
在設(shè)置這個(gè)透明度的時(shí)候，經(jīng)過測(cè)試發(fā)現(xiàn)，水印透明度，要求設(shè)置在大于等于0.005，因?yàn)楸冗@個(gè)低的話，使用ps顯現(xiàn)的時(shí)候效果不明顯。
如果需要去盡量影藏水印，可以把水印的字體顏色和頁面的背景顏色調(diào)成一致。
如果就要正常顯示，盡量設(shè)置opactity的時(shí)候設(shè)置為大于等于0.005，一個(gè)性能和顯示的平衡點(diǎn)。
4、附上watermark-dom完整代碼
如果后續(xù)更新和優(yōu)化的時(shí)候，源碼請(qǐng)看這個(gè)watermark-dom里的watermark.js文件
5、一個(gè)具體的例子
引入這個(gè)watermark.js的代碼。
html代碼

    
    
    
    
    
    
    
        
test
        
test
         baidu
    

效果如下圖：

6、水印測(cè)試工具
寫了插件，這個(gè)是測(cè)試地址
watermark-dom的測(cè)試工具
包括，測(cè)試，重置，顯示，隨機(jī)，四個(gè)部分。
特性：1、測(cè)試對(duì)水印參數(shù)屬性，重置水印屬性參數(shù)，顯示此時(shí)的水印屬性參數(shù)，隨機(jī)產(chǎn)生水印屬性參數(shù)；
2、水印按鈕組是position值fixed，可以浮現(xiàn)在頁面之上，不占字節(jié)。
3、對(duì)系統(tǒng)的各個(gè)部分頁面進(jìn)行水印的測(cè)試。
7、基礎(chǔ)使用
7.1本地引入封裝的js文件
只是簡單的加一個(gè)很淺的水印，實(shí)現(xiàn)起來很容易。不需要引入jquery插件。
watermark.js是必須要引進(jìn)的組件
第一步：獲取組件方式：git clone https://github.com/saucxs/watermark-dom.git
第二步：clone后，在需要加水印的相關(guān)頁面引入水印文件"watermark.js":
script type="text/javascript" src="./watermark.js">
第三步：在確保頁面DOM加載完畢之后，調(diào)用watermark的load方法(手動(dòng)加載):
   
注意：我們提供了init方法，用來初始化水印，添加load和resize事件
   
7.2本地引入封裝的js文件
第一步：npm獲取水印組件包：
npm install watermark-dom
第二步：引入水印模塊：
import watermark from "watermark-dom"
或者
var watermarkDom = require("watermark-dom")
第三步：在確保頁面DOM加載完畢之后，調(diào)用watermark的load方法(手動(dòng)加載):
   
注意：我們提供了init方法，用來初始化水印，添加load和resize事件
   
8、支持各種屬性配置使用
watermark_id: "wm_div_id",          //水印總體的id
watermark_prefix: "mask_div_id",    //小水印的id前綴
watermark_txt:"測(cè)試水印",             //水印的內(nèi)容
watermark_x:20,                     //水印起始位置x軸坐標(biāo)
watermark_y:20,                     //水印起始位置Y軸坐標(biāo)
watermark_rows:0,                   //水印行數(shù)
watermark_cols:0,                   //水印列數(shù)
watermark_x_space:100,              //水印x軸間隔
watermark_y_space:50,               //水印y軸間隔
watermark_font:"微軟雅黑",           //水印字體
watermark_color:"black",            //水印字體顏色
watermark_fontsize:"18px",          //水印字體大小
watermark_alpha:0.15,               //水印透明度，要求設(shè)置在大于等于0.005
watermark_width:100,                //水印寬度
watermark_height:100,               //水印長度
watermark_angle:15,                 //水印傾斜度數(shù)
watermark_parent_width:0,      //水印的總體寬度（默認(rèn)值：body的scrollWidth和clientWidth的較大值）
watermark_parent_height:0,     //水印的總體高度（默認(rèn)值：body的scrollHeight和clientHeight的較大值）
watermark_parent_node:null     //水印插件掛載的父元素element,不輸入則默認(rèn)掛在body上
上面的屬性都支持配置的，怎么使用呢？
基本山需要自己配置的屬性：watermark_txt,watermark_color,watermark_fontsize,watermark_alpha,watermark_angle，watermark_width,watermark_height這7個(gè)屬性一般是經(jīng)常用到的，其他屬性一般用的偏少。需要用到的就設(shè)置一下，不需要用到的就可以不設(shè)置，插件內(nèi)部會(huì)有默認(rèn)值的。
 watermark.load({ 
    watermark_txt:"測(cè)試水印，saucxs，測(cè)試水印，songEagle，工號(hào)等",  //水印的內(nèi)容
    watermark_color:"#5579ee",            //水印字體顏色
    watermark_fontsize:"24px",          //水印字體大小
    watermark_alpha:0.5,               //水印透明度，要求設(shè)置在大于等于0.005
    watermark_angle:135,                 //水印傾斜度數(shù)
    watermark_width:200,                //水印寬度
    watermark_height:200,               //水印長度
});
這個(gè)設(shè)置之后后的頁面如下圖所示：

所以一般先在watermark-dom的測(cè)試工具上，把需要配置的屬性值，調(diào)試好之后在寫入代碼中，這樣效率更高。
二、復(fù)雜（頻域方式圖片合并水印）
頻域方式圖片合并水印，意思就是說，從圖片編碼里進(jìn)行水印的添加，這樣從最根本上解決圖片的水印，而且水印的形成之后的圖片是用肉眼和PS顯示不出來的，只有通過反向編碼讓水印顯示，這樣就算是開發(fā)人員也不會(huì)知道這個(gè)圖片是否含有水印，只有開發(fā)這個(gè)系統(tǒng)的人員知道。
1、原理分析


編碼的目的有兩個(gè)：
1、對(duì)水印加密，
2、二控制水印能量的分布。
以下是頻域方式圖片合并水印的實(shí)驗(yàn)。
（1）原圖像。尺寸300*240 ，漢子一枚，

（2）水印照片。

（3）水印編碼。編碼方式采用隨機(jī)序列編碼，通過編碼，水印分布到隨機(jī)分布到各個(gè)頻率，并且對(duì)水印進(jìn)行了加密。

（4）原圖像頻域。經(jīng)歷的是傅里葉變換，下圖變換后的頻域圖像

（5）水印圖像頻域。經(jīng)歷的是傅里葉變換，下圖變換后的頻域圖像

（6）合并水印和原圖。之后，將疊加水印的頻譜進(jìn)行傅里葉逆變換，得到疊加數(shù)字水印后的圖像，，將圖像頻域和水印編碼進(jìn)行合并。看不出來已經(jīng)加了水印吧，
實(shí)際上，我們是把水印以噪聲的形式添加到原圖像中。

（7）水印圖與原圖的殘差（看不出來殘差區(qū)別，需要調(diào)整對(duì)比度才能看得出來）

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

（9）下圖是原圖頻譜豎過來的樣子，其能量主要集中在低頻。
那么，為什么頻譜發(fā)生了巨大的變化，而在空域卻變化如此小呢？這是因?yàn)槲覀儽荛_了圖像的主要頻率。

合并之后

（10）水印提取是水印疊加的逆過程，

（11）提取后，得到水印。

2、附上可以還原實(shí)驗(yàn)的全部代碼（matlab代碼）
clc;clear;close all;
alpha = 1;

%% read data
im = double(imread("G:2017學(xué)習(xí)Work圖片水印	est.jpg"))/255;
mark = double(imread("G:2017學(xué)習(xí)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學(xué)習(xí)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
三、總結(jié)
1、watermark-dom水印是一個(gè)簡單的用于dom的水印，簡單易上手，支持多選項(xiàng)配置。
2、頻域方式圖片合并水印是一個(gè)從圖片的編碼方式進(jìn)行合成水印，水印不可見，直接反向編碼才可以拿到水印，從最根本上解決了數(shù)據(jù)安全和數(shù)據(jù)泄露后的追蹤問題。