【前端】页面增加水印

阅读数: 2021-11-22

摘要

页面水印目前主要有以下2种做法：

服务器生成水印图片置于页面顶/底层
前端生成水印图片（canvas，svg）置于页面顶/底层

对于需要考虑兼容，如IE10以下版本的浏览器，推荐使用服务器生成水印并放于页面底层的方式

对于安全性较高场景，需要防范水印被删除或者篡改。

对于图片水印来说，除了显式水印，还可以通过隐式水印来对图片进行鉴权。

<style>
    /* 图片水印，置于底层(background) */
    body {background-image: url('');}
    /* 图片水印，置于顶层（pointer-events） */
    div#watermark {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.6);
        background-image: url('');
        z-index: 999999;
        pointer-events: none;
    }
</style>
<body>
    <div id="watermark"></div>
</body>

水印组件封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <img src="" alt="" style="max-width: 100%">


  <script>
    (function () {
      function __canvasWM({
        container = document.body,
        textAlign = 'center',
        textBaseline = 'middle',
        fontSize,
        fontFamily,
        fontWeight,
        font = "normal 18px 微软雅黑",
        strokeStyle = 'black',
        content = '1111111111111111111111111111111111111111111111111111111111111', // 水印内容，数组则多行显示，多行显示情况下，非第一行字体比第一行字体小4号
        rotate = '12', // 倾斜度
        color = 'black', // 字体颜色
        opacity = 0.5,
        xGap = 0,
        yGap = 0,
        zIndex = 10000
      } = {}) {
        const args = arguments[0];
        const canvas = document.createElement('canvas');

        const ctx = canvas.getContext("2d");
        // ctx.imageSmoothingEnabled = true
        // ctx.mozImageSmoothingEnabled = true
        // ctx.webkitImageSmoothingEnabled = true
        // ctx.msImageSmoothingEnabled = true

        ctx.save()

        const fonts = font.split(/\s+/)
        if (fontWeight) fonts[0] = fontWeight
        if (fontSize) fonts[1] = fontSize + 'px'
        if (fontFamily) fonts[2] = fontFamily
        ctx.font = fonts.join(' ')

        const sita = Math.PI / 180 * rotate
        let w =  ctx.measureText(content).width
        let h =  Math.max(w * Math.tan(sita), parseFloat(fonts[1]))
        w = w * Math.cos(sita) + xGap
        h = h * Math.cos(sita) + yGap
        canvas.width = w
        canvas.height = h
        ctx.translate(w/2, h/2)

        ctx.globalAlpha = opacity;
        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;
        ctx.fillStyle = color;

        ctx.rotate(sita);
        ctx.fillText(content, 0, 0)
        ctx.strokeStyle = strokeStyle;
        ctx.strokeText(content, 0, 0)
        ctx.restore()

        const base64Url = canvas.toDataURL();
        document.querySelector('img').src = base64Url
        // const __wm = document.querySelector('.__wm');

        // const watermarkDiv = __wm || document.createElement("div");
        // const styleStr = `
        //   position:fixed;
        //   top:0;
        //   left:0;
        //   bottom:0;
        //   right:0;
        //   width:100%;
        //   height:100%;
        //   z-index:${zIndex};
        //   pointer-events:none;
        //   background-repeat:repeat;
        //   background-image:url('${base64Url}')`;

        // watermarkDiv.setAttribute('style', styleStr);
        // watermarkDiv.classList.add('__wm');

        // if (!__wm) {
        //   container.style.position = 'relative';
        //   container.insertBefore(watermarkDiv, container.firstChild);
        // }
        
        // const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        // if (MutationObserver) {
        //   let mo = new MutationObserver(function () {
        //     const __wm = document.querySelector('.__wm');
        //     // 只在__wm元素变动才重新调用 __canvasWM
        //     if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
        //       // 避免一直触发
        //       mo.disconnect();
        //       mo = null;
        //     __canvasWM(JSON.parse(JSON.stringify(args)));
        //     }
        //   });

        //   mo.observe(container, {
        //     attributes: true,
        //     subtree: true,
        //     childList: true
        //   })
        // }
      }

      if (typeof module != 'undefined' && module.exports) {  //CMD
        module.exports = __canvasWM;
      } else if (typeof define == 'function' && define.amd) { // AMD
        define(function () {
          return __canvasWM;
        });
      } else {
        window.__canvasWM = __canvasWM;
      }
    })();

    __canvasWM()
</script>
</body>
</html>

图片隐写术

对于图片资源来说，显性水印会破坏图片的完整性，有些情况下我们想要在保留图片原本样式，这时可以添加隐藏水印。

简单实现思路是：图片的像素信息里存储着 RGB 的色值，对于RGB 分量值的小量变动，是肉眼无法分辨的，不会影响对图片的识别，我们可以对图片的RGB以一种特殊规则进行小量的改动。（LSB最低有效位）

通过canvas.getImageData()可以获取到图片的像素数据，首先在canvas中绘制出水印图，获取到其像素数据，然后通过canvas获取到原图片的像素数据，选定R、G、B其中一个如G，遍历原图片像素，将对应水印像素有信息的像素的G都转成奇数，对应水印像素没有信息的像素都转成偶数，处理完后转成base64并替换到页面上，这时隐形水印就加好了，正常情况下看这个图片是没有水印的，但是经过对应规则（上边例子对应的解密规则是：遍历图片的像素数据中对应的G，奇数则将其rgba设置为0，255，0，偶数则设置为0，0，0）的解密处理后就可以看到水印了。

这种方式下，当用户采用截图、保存图片后转换格式等方法获得图片后，图片的色值可能是会变化的，会影响水印效果加水印代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvasText" width="256" height="256"></canvas>
        <canvas id="canvas" width="256" height="256"></canvas>
        
        <script>
            var ctx = document.getElementById('canvas').getContext('2d');
            var ctxText = document.getElementById('canvasText').getContext('2d');
            
            var textData;
            ctxText.font = '30px Microsoft Yahei';
            ctxText.fillText('水印', 60, 130);
            textData = ctxText.getImageData(0, 0, ctxText.canvas.width, ctxText.canvas.height).data;
            
            var img = new Image();
            var originalData;
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                // 获取指定区域的canvas像素信息
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                console.log(originalData);
                    mergeData(textData,'G')
                    console.log(document.getElementById('canvas').toDataURL())
            };
            img.src = './aa.jpeg';
            
            var mergeData = function(newData, color){
                var oData = originalData.data;
                var bit, offset;  
             
                switch(color){
                    case 'R':
                        bit = 0;
                        offset = 3;
                        break;
                    case 'G':
                        bit = 1;
                        offset = 2;
                        break;
                    case 'B':
                        bit = 2;
                        offset = 1;
                        break;
                }
             
                for(var i = 0; i < oData.length; i++){
                    if(i % 4 == bit){
                        // 只处理目标通道
                        if(newData[i + offset] === 0 && (oData[i] % 2 === 1)){
                            // 没有水印信息的像素，将其对应通道的值设置为偶数
                            if(oData[i] === 255){
                                oData[i]--;
                            } else {
                                oData[i]++;
                            }
                        } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)){
                            // 有水印信息的像素，将其对应通道的值设置为奇数
                            if(oData[i] === 255){
                                oData[i]--;
                            } else {
                                oData[i]++;
                            }
                        }
                    }
                }
                ctx.putImageData(originalData, 0, 0);
            }
            
        </script>
    </body>
</html>

显示水印代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="256" height="256"></canvas>
        
        <script>
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            var originalData;
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                // 获取指定区域的canvas像素信息
                originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
                console.log(originalData);
                    processData(originalData)
            };
            img.src = './a.jpg';
            
            var processData = function(originalData){
                var data = originalData.data;
                for(var i = 0; i < data.length; i++){
                    if(i % 4 == 1){
                        if(data[i] % 2 === 0){
                            data[i] = 0;
                        } else {
                            data[i] = 255;
                        }
                    } else if(i % 4 === 3){
                        // alpha通道不做处理
                        continue;
                    } else {
                        // 关闭其他分量，不关闭也不影响答案，甚至更美观 o(^▽^)o
                        data[i] = 0;
                    }
                }
                // 将结果绘制到画布
                ctx.putImageData(originalData, 0, 0);
            }
                
        </script>
    </body>
</html>

文件隐藏：copy /b A.jpg + B.zip C.jpg

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/1a3424e8.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！