給你的web頁面添加盲水印，附帶檢盲水印方案

應用場景

在一些敏感系統有的時候我們爲了防止別人截圖或追溯圖片源頭是誰發的。我們需要在頁面上埋下我們的隱形水印。

開始做

埋水印

1. github上有很多水印的js插件，download下來一個改一改，源碼見最後附錄。
   改動內容：增加了判斷dom被人爲修改的檢測機制， 優化了dom渲染機制。增加透明水印
2. 引入WaterMark js模塊，
3. 初始化waterMark.init(0) // 0: 默認出現顯性水印和隱形水印。 1 只要隱性水印初始化waterMark.init(0) // 0: 默認出現顯性水印和隱形水印。 1 只要隱性水印
4. 效果如圖：
   

檢水印工具

這裏需要用到css3的mix-blend-mode: color-burn;（顏色混合模式：顏色加深）
參照張鑫旭的混合模式的文檔

1. 做一個前端選擇圖片展示的功能（我這裏直接用了element-ui的控件）
   
2. 選擇圖片轉換成base64填充一個img標籤，然後同級放一個div標籤蒙層
   
3. 寫上樣式

.imgshadow {
    width: 100%;
    height: 100%;
    max-width: 820px;
    background: #000;
    mix-blend-mode: color-burn;  //色彩混合模式
    position: absolute;
    top: 0;
    left: 0;
}

4.看看效果

(PS: 如果你的頁面不是白底的，需要自己計算一下對應的文本的顏色)
附錄源碼：

//mode 0: 默認出現顯性水印和隱形水印。 1 只要隱性水印
var init = function(mode){
    var n = document.cookie.match('(^|;)?loginName=([^;]*)(;|$)')||document.cookie.match('(^|;)?username=([^;]*)(;|$)');
    var gOaName = n?n[2]:'devTest';
    var wmTop = window.top;
    var div  = document.createElement('div')
    div.id = "idmast"
    document.body.appendChild(div)
    var total = [];
    var onresize = false;
    !function(host){
        if(host.WMJS || wmTop.WMJS) return;
        host.WMJS = function () {
            var isIE9 = document.all && document.addEventListener && !window.atob;
            var front_rows0,front_cols0,
                front_rows1,front_cols1,
                front_x=0,   //x軸間距
                front_y=0,    //Y軸間距
                original_front_rows=0,
                original_front_cols=0,
                // original_front_x_space=120, //x軸密度
                // original_front_y_space=100, //Y軸密度
                original_front_x_space=100, //x軸密度
                original_front_y_space=80, //Y軸密度
                mask_txt= gOaName,  //水印字---------rtx
                color='#2e3035',   //字體顏色
                front_txt_alpha=0.1, //字體透明度 0~1
                font_size='18px',      //字體大小
                front_font='Helvetica Neue',  //字體
                width=60,  //寬間距
                height=50, //高間距
                angle=35 //字體傾斜度
            ;
            function remove_old_watermask_0(){
                for (var i = 0; i <= front_rows0; i++) {
                    for (var j = 0; j <= front_cols0; j++) {
                        var rmElm=document.getElementById('mask_0_elem'+i+j);
                        if(rmElm){
                            rmElm.parentNode.removeChild(rmElm);
                            // console.log('rm'+rmElm);
                        }
                    }
                }
            }
            function remove_old_watermask_1(){
                for (var i = 0; i <= front_rows1; i++) {
                    for (var j = 0; j <= front_cols1; j++) {
                        var rmElm=document.getElementById('mask_1_elem'+i+j);
                        if(rmElm){
                            rmElm.parentNode.removeChild(rmElm);
                            // console.log('rm'+rmElm);
                        }
                    }
                }
            }
            function getRotation(deg) {
                var deg2rad = Math.PI * 2 / 360;
                var rad = deg * deg2rad;
                var costheta = Math.cos(rad);
                var sintheta = Math.sin(rad);
                var M11 = costheta;
                var M12 = -sintheta;
                var M21 = sintheta;
                var M22 = costheta;
                return [M11,M12,M21,M22];
            }
            return {
                watermark: function (type) { 
                    eval('remove_old_watermask_'+type+'()')
                    var oTemp = document.createDocumentFragment();
                    if(type == 1){
                        oTemp = div
                    }
                    
                    var front_x_space=original_front_x_space;
                    var front_y_space=original_front_y_space;
                    var front_cols, front_rows
                    front_rows=original_front_rows;
                    front_cols=original_front_cols;
                    if(type == 1){
                        front_x_space = 60;
                        front_y_space = 40;
                        width = 40;
                        height= 20;
                        front_txt_alpha = 0.005
                        font_size = '14px'
                    }else{
                        front_x_space = 100;
                        front_y_space = 80;
                        front_txt_alpha = 0.1;
                        width = 60;
                        height= 50;
                        font_size = '18px'              
                    }
                    var max_width=window.innerWidth- 45;
                    var max_height= window.innerHeight-45;
                    if(front_cols==0||(parseInt(front_x+width*front_cols+front_x_space*(front_cols-1))> max_width)){
                        front_cols=parseInt((front_x_space+max_width - front_x)/(width+front_x_space));
                        front_x_space=parseInt(((max_width - front_x)-width*front_cols)/(front_cols-1));
                        if(!front_x_space){
                            front_x_space=0;
                        }
                    }
                    if(front_rows==0||(parseInt(front_y+height*front_rows+front_y_space*(front_rows-1))> max_height)){
                        front_rows  =parseInt((front_y_space+max_height - front_y)/(height+front_y_space));
                        front_y_space=parseInt(((max_height - front_y)-height*front_rows)/(front_rows-1));
                        if(!front_y_space){
                            front_y_space=0;
                        }
                    }
                    if(type == 1){
                        front_rows1 = front_rows
                        front_cols1 = front_cols
                    }else{
                        front_rows0 = front_rows
                        front_cols0 = front_cols
                    }
                    var mask_elem=document.createElement('div');
                    var M=getRotation(-angle);
                    mask_elem.id='mask_elem00';
                    mask_elem.className = 'isecui-mask-'+type
                    mask_elem.appendChild(document.createTextNode(mask_txt));
                    mask_elem.style.webkitTransform = "rotate(-"+angle+"deg)";
                    mask_elem.style.MozTransform = "rotate(-"+angle+"deg)";
                    mask_elem.style.msTransform = "rotate(-"+angle+"deg)";
                    mask_elem.style.OTransform = "rotate(-"+angle+"deg)";
                    mask_elem.style.transform = "rotate(-"+angle+"deg)";
                    mask_elem.style.visibility="";
                    mask_elem.style.position="fixed";
                    mask_elem.style.pointerEvents="none";// 鼠標穿透，這個避免按鈕被遮蓋點不了
                    mask_elem.style.left=front_x+'px';
                    mask_elem.style.top=front_y+'px';
                    mask_elem.style.overflow="hidden";
                    //mask_elem.style.border="solid #eee 1px";
                    mask_elem.style.opacity=front_txt_alpha;
                    if(isIE9){
                        mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+")";
                    }else{
                        mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+") progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+M[0]+", M12="+M[1]+", M21="+M[2]+", M22="+M[3]+")";
                    }
                    mask_elem.style.fontSize=font_size;
                    mask_elem.style.fontFamily=front_font;
                    mask_elem.style.color=color;
                    mask_elem.style.textAlign="center";
                    //mask_elem.style.width=width+'px';
                    //mask_elem.style.height=height+'px';
                    mask_elem.style.display="block";
                    oTemp.appendChild(mask_elem);
                    var x;
                    var y;
                    for (var i = 0; i < front_rows; i++) {
                        y=front_y+(front_y_space+height)*i;
                        for (var j = 0; j < front_cols; j++) {
                            x=front_x+(width+front_x_space)*j;
                            if(i!=0 || j!=0){
                                //clone
                                var new_elem=mask_elem.cloneNode(true);
                                new_elem.id='mask_'+type+'_elem'+i+j;
                                new_elem.style.left=x+'px';
                                new_elem.style.top=y+'px';
                                oTemp.appendChild(new_elem);
                            }
                        };
                    };
                    document.body.appendChild(oTemp);
                    total[type] = eval('front_rows'+type+'*front_cols'+type)
                    setTimeout(function(){
                        onresize = false
                    })
                }
            };
        }();
        var __w_f = function(){
            var f = host.WMJS.watermark;
            if(!__w_f.__w_t){
                f(1);
                if(!mode){
                    f(0);
                } 
                __w_f.__w_t = setTimeout(function(){
                    __w_f.__w_t = null;
                },500);
            }
        };
        host.onresize = function(){
            __w_f('onresize');
            onresize = true
            console.log('watermak resize1');
        };

        host.onload = function(){
            __w_f('onload');
            console.log('watermak onload');
        };
        var waterMarkTimer = setInterval(function(){
            var mask0 = document.getElementsByClassName('isecui-mask-0').length;
            var mask1 = document.getElementsByClassName('isecui-mask-1').length;
            var hide = document.querySelector('.__web-inspector-hide-shortcut__')
            if(hide){
                window.location.reload()
            }
            if(((total[0]&&total[0]>mask0)||(total[1]&&total[1]>mask1))&&!onresize){
                window.location.reload()
            }
        },1000)
    }(window);
}

export default {
    init,
    name :'WaterMark'
}