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

插件github地址：https://github.com/saucxs/wat... 有詳細的使用步驟，可以參考，不會用請留言，感覺可以，請給個星星。

阿里巴巴內網的不可見水印用的是什么算法？
據說月餅事件截圖的那位員工也被開除了？

下面的只是簡單的加一個很淺的水印，實現起來很容易。

隨便找一個網站，比如就找掘金的個人首頁，

（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）改變一下頁面窗口大小，然后就可以看到我首頁出現如下圖的水印，一層淺淺的水印

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

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

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

    
    
    
    
    
    
    
        
test
        
test
         baidu
    

效果如下圖：

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

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


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

（2）水印照片。

（3）水印編碼。編碼方式采用隨機序列編碼，通過編碼，水印分布到隨機分布到各個頻率，并且對水印進行了加密。

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

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

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

（7）水印圖與原圖的殘差（看不出來殘差區別，需要調整對比度才能看得出來）

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

（9）下圖是原圖頻譜豎過來的樣子，其能量主要集中在低頻。
那么，為什么頻譜發生了巨大的變化，而在空域卻變化如此小呢？這是因為我們避開了圖像的主要頻率。

合并之后

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

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

2、附上可以還原實驗的全部代碼（matlab代碼）
clc;clear;close all;
alpha = 1;

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