前端和算法實現：給網站上加上本身的水印（簡單+複雜）

時間  2019-11-06
標籤 前端 算法 實現 網站 加上 本身 水印 簡單 複雜 欄目 網站開發 简体版
原文   原文鏈接

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

有詳細的使用步驟，能夠參考，不會用請留言，感受能夠，請給個星星。javascript

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

 

1、簡單

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

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

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

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

 

 
 

這樣就能夠加水印了。我選擇了百度的首頁，好像百度對這個有防禦。git

 

      它的做用是在當前頁面上增長了一個透明度只有0.005的不少的水印。水印內容「測試水印，1021002301，測試水印，DAHJDBJJdjsfsc 」
 
 
使用QQ截圖，這樣一點也看不出來，有水印。
 
 
 
 
 
 
 
 
 
 
如今把圖片放到PS裏面，建一個圖層在上面。所有填充爲黑色，混合模式選擇正片疊底這一類的（也就是讓亮的更亮，暗的更暗），一個個試。。
 
 
當我試到「實色混合」和「顏色加深」的時候，水印就顯示出來了。

哇，嚇到我了，原來能夠這麼玩。github

 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代碼web

<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.htmlchrome

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

特性：一、測試對水印參數屬性，重置水印屬性參數，顯示此時的水印屬性參數，隨機產生水印屬性參數；

二、水印按鈕組是position值fixed，能夠浮如今頁面之上，不佔字節。

三、對系統的各個部分頁面進行水印的測試。

 

2、複雜

頻域制定數字盲水印

信號是有頻率的，一個信號能夠看作是無數個不一樣階的正弦信號的的疊加。
F(\omega)=\int_{-\infty }^{+\infty } f(t)e^{-i\omega t}dt
上式爲傅里葉變換公式，f(t)是指時域信號（對於信號咱們說時域，由於是與時間有關的，而圖像咱們每每說空域，與空間有關），\omega 是指頻率。

 

 

一、編碼的目的有二，一是對水印加密，二控制水印能量的分佈。如下是疊加數字盲水印的實驗。

（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 PSNRC=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; endendMSE=MSE/360.^2;PSNR=20*log10(255/sqrt(MSE));MSEPSNR
 
 
  



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程