應用場景

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

開始做

埋水印

github上有很多水印的js插件，download下來一個改一改，源碼見最后附錄。
改動內容：增加了判斷dom被人為修改的檢測機制， 優化了dom渲染機制。增加透明水印

引入WaterMark js模塊，

初始化waterMark.init(0) // 0: 默認出現顯性水印和隱形水印。 1 只要隱性水印初始化waterMark.init(0) // 0: 默認出現顯性水印和隱形水印。 1 只要隱性水印

效果如圖：

檢水印工具

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

做一個前端選擇圖片展示的功能（我這里直接用了element-ui的控件）

選擇圖片轉換成base64填充一個img標簽，然后同級放一個div標簽蒙層

寫上樣式

.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, //水印字---------rtxcolor='#2e3035', //字體顏色front_txt_alpha=0.1, //字體透明度 0~1font_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_rowsfront_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.005font_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_rowsfront_cols1 = front_cols}else{front_rows0 = front_rowsfront_cols0 = front_cols}var mask_elem=document.createElement('div');var M=getRotation(-angle);mask_elem.id='mask_elem00';mask_elem.className = 'isecui-mask-'+typemask_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){//clonevar 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 = trueconsole.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' }

總結

以上是生活随笔為你收集整理的给你的web页面添加盲水印，附带检盲水印方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。