前端和算法實現：給網站上加上自己的水印（簡單+復雜）

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

有詳細的使用步驟，可以參考，不會用請留言，感覺可以，請給個星星。

sau交流學習社區（首發）：https://www.mwcxs.top/page/452.html

 

一、簡單

阿里巴巴內網的不可見水印用的是什么算法？

據說月餅事件截圖的那位員工也被開除了？

 

 

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

瀏覽器終端下粘貼下面的代碼，

 

 

 

這樣就可以加水印了。我選擇了百度的首頁，好像百度對這個有防護。

 

      它的作用是在當前頁面上增加了一個透明度只有0.005的很多的水印。水印內容“測試水印，1021002301，測試水印，DAHJDBJJdjsfsc ”

 

 

使用QQ截圖，這樣一點也看不出來，有水印。

 

 

 

 

 

 

 

 

 

 

現在把圖片放到PS里面，建一個圖層在上面。全部填充為黑色，混合模式選擇正片疊底這一類的（也就是讓亮的更亮，暗的更暗），一個個試。。

 

 

當我試到“實色混合”和“顏色加深”的時候，水印就顯示出來了。

哇，嚇到我了，原來可以這么玩。

 watermark-dom的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>

 

 

寫了插件，這個是測試地址

http://www.mwcxs.top/static/testTool/index.html

包括，測試，重置，顯示，隨機，四個部分。

特性：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