很多大公司内网都有页面不可见水印，一旦图片截图发送给外部后，可以根据图片不可见水印进行溯源，查出发送人的信息。

原图：(就是下面白色的图片)

PS 打开这个图片，在这个图片上新建图层，填充黑色，混合模式选择是色混合即可。

效果：

在线测试地址 https://www.mwcxs.top/static/testTool/index.html

(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 = {});