前端和算法实现：给网站上加上自己的水印（简单+复杂）

发布时间：2020-12-14 23:53:53 所属栏目：资源来源：网络整理

导读：h1 class="QuestionHeader-title"span style="font-size: 16px;"watermark插件的github地址：a href="https://github.com/saucxs/watermark" target="_blank"https://github.com/saucxs/watermark h1 class="QuestionHeader-title"span style="font-size: 18

<h1 class="QuestionHeader-title"><span style="font-size: 16px;">watermark插件的github地址：<a href="https://github.com/saucxs/watermark" target="_blank">https://github.com/saucxs/watermark

<h1 class="QuestionHeader-title"><span style="font-size: 18pt;">一、简单
<h1 class="QuestionHeader-title"><span style="font-size: 18px;">阿里巴巴内网的不可见水印用的是什么算法？
<div class="QuestionRichText QuestionRichText--expandable" style="display: inline !important;"><span class="RichText">据说月饼事件截图的那位员工也被开除了？
<div class="QuestionRichText QuestionRichText--expandable" style="display: inline !important;">?
<div class="QuestionRichText QuestionRichText--expandable" style="display: inline !important;">?
<div class="QuestionRichText QuestionRichText--expandable" style="display: inline !important;">

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

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

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

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

(= loadMark = defaultSettings="text"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 (arguments.length===1&& arguments[0] ==="object" src=arguments[0]||(key (src[key]&&defaultSettings[key]&&src[key]=== =

        </span><span style="color: #0000ff;"&gt;var</span> oTemp =<span style="color: #000000;"&gt; document.createDocumentFragment();

        </span><span style="color: #0000ff;"&gt;if</span> (window.watermarkdivs &amp;&amp; window.watermarkdivs.length > 0<span style="color: #000000;"&gt;) {
            document.body.removeChild(document.getElementById(</span>"otdivid"<span style="color: #000000;"&gt;));
            window.watermarkdivs </span>=<span style="color: #000000;"&gt; [];
        }

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;获取页面最大宽度</span>
        <span style="color: #0000ff;"&gt;var</span> page_width =<span style="color: #000000;"&gt; Math.max(document.body.scrollWidth,document.body.clientWidth);
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;获取页面最大长度</span>
        <span style="color: #0000ff;"&gt;var</span> page_height =<span style="color: #000000;"&gt; Math.max(document.body.scrollHeight,document.body.clientHeight);

        </span><span style="color: #0000ff;"&gt;var</span> otdiv = document.getElementById("otdivid"<span style="color: #000000;"&gt;);

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔</span>
        <span style="color: #0000ff;"&gt;if</span> (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) ><span style="color: #000000;"&gt; page_width)) {
            defaultSettings.watermark_cols </span>= parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width +<span style="color: #000000;"&gt; defaultSettings.watermark_x_space));
            defaultSettings.watermark_x_space </span>= parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1<span style="color: #000000;"&gt;));
        }
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔</span>
        <span style="color: #0000ff;"&gt;if</span> (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) ><span style="color: #000000;"&gt; page_height)) {
            defaultSettings.watermark_rows </span>= parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height +<span style="color: #000000;"&gt; defaultSettings.watermark_y_space));
            defaultSettings.watermark_y_space </span>= parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1<span style="color: #000000;"&gt;));
        }

        </span><span style="color: #0000ff;"&gt;var</span><span style="color: #000000;"&gt; x;
        </span><span style="color: #0000ff;"&gt;var</span><span style="color: #000000;"&gt; y;
        </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = 0; i < defaultSettings.watermark_rows; i++<span style="color: #000000;"&gt;) {
            y </span>= defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) *<span style="color: #000000;"&gt; i;
            </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> j = 0; j < defaultSettings.watermark_cols; j++<span style="color: #000000;"&gt;) {
                x </span>= defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) *<span style="color: #000000;"&gt; j;

                </span><span style="color: #0000ff;"&gt;var</span> mask_div = document.createElement('div'<span style="color: #000000;"&gt;);
                mask_div.id </span>= 'mask_div' + i +<span style="color: #000000;"&gt; j;
                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;设置水印div倾斜显示</span>
                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"<span style="color: #000000;"&gt;;
                mask_div.style.MozTransform </span>= "rotate(-" + defaultSettings.watermark_angle + "deg)"<span style="color: #000000;"&gt;;
                mask_div.style.msTransform </span>= "rotate(-" + defaultSettings.watermark_angle + "deg)"<span style="color: #000000;"&gt;;
                mask_div.style.OTransform </span>= "rotate(-" + defaultSettings.watermark_angle + "deg)"<span style="color: #000000;"&gt;;
                mask_div.style.transform </span>= "rotate(-" + defaultSettings.watermark_angle + "deg)"<span style="color: #000000;"&gt;;
                mask_div.style.visibility </span>= ""<span style="color: #000000;"&gt;;
                mask_div.style.position </span>= "absolute"<span style="color: #000000;"&gt;;
                </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;选不中</span>
                mask_div.style.left = x + 'px'<span style="color: #000000;"&gt;;
                mask_div.style.top </span>= y + 'px'<span style="color: #000000;"&gt;;
                mask_div.style.overflow </span>= "hidden"<span style="color: #000000;"&gt;;
                mask_div.style.zIndex </span>= "9"<span style="color: #000000;"&gt;;
                mask_div.style.pointerEvents </span>= "none"<span style="color: #000000;"&gt;;
                </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;mask_div.style.border="solid #eee 1px";</span>
                mask_div.style.opacity =<span style="color: #000000;"&gt; defaultSettings.watermark_alpha;
                mask_div.style.fontSize </span>=<span style="color: #000000;"&gt; defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily </span>=<span style="color: #000000;"&gt; defaultSettings.watermark_font;
                mask_div.style.color </span>=<span style="color: #000000;"&gt; defaultSettings.watermark_color;
                mask_div.style.textAlign </span>= "center"<span style="color: #000000;"&gt;;
                mask_div.style.width </span>= defaultSettings.watermark_width + 'px'<span style="color: #000000;"&gt;;
                mask_div.style.height </span>= defaultSettings.watermark_height + 'px'<span style="color: #000000;"&gt;;
                mask_div.style.display </span>= "block"<span style="color: #000000;"&gt;;
                mask_div.style.fontWeight </span>= "900"<span style="color: #000000;"&gt;;
                oTemp.appendChild(mask_div);

            };
        };
        document.body.appendChild(oTemp);
    };

watermark.load </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(settings) {
    window.onload </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;() {
        loadMark(settings);
    };
    window.onresize </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;() {
        loadMark(settings);
    };
};
watermark.load({ watermark_txt: </span>"测试水印，1021002301，测试水印，SDAHJDBJJdjsfsc"<span style="color: #000000;"&gt; });

})(window.watermark = {});

html代码

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;style</span><span style="color: #0000ff;"&gt;="width:300px;height:300px;background-color: red; opacity:0.98;"</span><span style="color: #ff0000;"&gt; onclick</span><span style="color: #0000ff;"&gt;="alert(1);"</span><span style="color: #0000ff;"&gt;></span>test<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;style</span><span style="color: #0000ff;"&gt;="width:300px;height:300px;background-color: blue;  opacity:0.9;"</span><span style="color: #ff0000;"&gt; onclick</span><span style="color: #0000ff;"&gt;="alert(2);"</span><span style="color: #0000ff;"&gt;></span>test<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;a </span><span style="color: #ff0000;"&gt;href</span><span style="color: #0000ff;"&gt;="www.test.com"</span><span style="color: #0000ff;"&gt;></span> baidu<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;a</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>

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

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

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

特性：1、测试对水印参数属性，重置水印属性参数，显示此时的水印属性参数，随机产生水印属性参数；

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

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

<h1 class="QuestionHeader-title">二、复杂

频域制定数字盲水印

信号是有频率的，一个信号可以看做是无数个不同阶的正弦信号的的叠加。 $F(omega)=int_{-infty }^{+infty } f(t)e^{-iomega t}dt$

1、编码的目的有二，一是对水印加密，二控制水印能量的分布。以下是叠加数字盲水印的实验。

（1）原图像。尺寸300*240 ，汉子一枚，

（2）水印照片。

（3）水印编码。编码方式采用随机序列编码，通过编码，水印分布到随机分布到各个频率，并且对水印进行了加密。

（4）原图像频域。经历的是傅里叶变换，下图变换后的频域图像

（5）水印图像频域。经历的是傅里叶变换，下图变换后的频域图像

（6）合并水印和原图。之后，将叠加水印的频谱进行傅里叶逆变换，得到叠加数字水印后的图像，，将图像频域和水印编码进行合并。看不出来已经加了水印吧，哈哈哈

? ? ?实际上，我们是把水印以噪声的形式添加到原图像中。

（7）水印图与原图的残差（看不出来残差区别，需要调整对比度才能看得出来）

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

?（9）下图是原图频谱竖过来的样子，其能量主要集中在低频。

? ? ?那么，为什么频谱发生了巨大的变化，而在空域却变化如此小呢？这是因为我们避开了图像的主要频率。

合并之后

（10）水印提取是水印叠加的逆过程，

(11)提取后，得到水印。

代码

clc;clear;close all;alpha = 1;

%% read dataim = 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 markimsize = size(im);%randomTH=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),:); endend% symmetricmark_ = zeros(imsize(1),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,:); endendfigure,imshow(mark_),title('encoded watermark');

%% add watermarkFA=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,FB(:,1).^2+FB(:,2).^2+FB(:,title('spectrum of watermarked image');figure,3).^2-FA(:,title('spectrum of watermark');

%% extract watermarkFA2=fft2(FAO);G=(FA2-FA)/alpha;GG=G;for i=1:imsize(1)*0.5 for j=1:imsize(2) GG(M(i),:)=G(i,:); endendfor i=1:imsize(1)*0.5 for j=1:imsize(2) GG(imsize(1)+1-i,:)=GG(i,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!