关于前端:前端给页面添加暗水印的办法

53次阅读

共计 3661 个字符，预计需要花费 10 分钟才能阅读完成。

前端给页面增加暗水印的方法

上一篇文章讲到了在页面上增加明水印的办法，然而明水印比拟好革除，而且对于一些没做解决的图片，当用户间接保留的时候，是没有水印的，这时候信息泄露问题仍然存在。为了解决这样的问题，咱们须要用到暗水印。

实现思路

咱们晓得图片是由多个像素点组成的，通过 canvas 的 getImageData 办法，咱们能够失去画布指定矩形的像素数据

getImageData() 办法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R – 红色 (0-255)
G – 绿色 (0-255)
B – 蓝色 (0-255)
A – alpha 通道 (0-255; 0 是通明的，255 是齐全可见的)

值得注意的是：RGB 重量值的小量变动，是肉眼无奈分辨的，不影响对图片的辨认。这是咱们在图片上增加暗水印的基石

color/alpha 以数组模式存在，并存储于 ImageData 对象的 data 属性中。

以下代码可取得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

感兴趣的同学能够打印看一下成果

function createBackgroundImage(content, proportion, tiltAngle) {const can = document.createElement('canvas')
   can.width = document.body.clientWidth / proportion
   can.height = document.body.clientHeight / proportion
   const context = can.getContext('2d')
   context.rotate(-25 * Math.PI / 180);
   context.font = "800 30px Microsoft JhengHei";
   context.fillStyle = "#000";
   context.textAlign = 'center';
   context.textBaseline = 'Middle';
   context.fillText(content, 100, 100)
   console.log(context.getImageData(0, 0, can.width, can.height))
   return can.toDataURL("image/png")
}
const div = document.getElementById('content')
    console.log('div', div)
    div.style.backgroundImage = `url(${createBackgroundImage('伯约同学', 6, 10)})`

如下所示，给出了对应图片的 ImageData 后果，它有以下几个属性

data: Uint8ClampedArray(52752) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …]
colorSpace: “srgb”
height: 42
width: 314

Uint8ClampedArray 则是对应的像素点，每四个表征一个像素点，而后从左往右，从上往下的程序进行排列。

上面进行一个简略的加密：把加密图案放到原图中，如果原图中对应的重叠像素点有内容，则最低位为 1，否则为 0

function mergeData(rawImageSrc, watermarkImageSrc) {return new Promise((resolve, reject) => {const img = new Image()
    img.onload = function () {const myCanvas = document.createElement("canvas");
      myCanvas.width = img.width;
      myCanvas.height = img.height;
      const ctx = myCanvas.getContext("2d")
      const bit = 0
      const offset = 3
      const oImageData = getImageData(rawImageSrc)
      const oData = oImageData.data
      const newData = getImageData(watermarkImageSrc).data
      for (let 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)) {
            // 有信息的像素
            oData[i]++
          }
        }
      }
        ctx.putImageData(oImageData, 0, 0)
        resolve(myCanvas.toDataURL("image/png"))
     }
       img.src = rawImageSrc
    })
  function getImageData(image) {const img = new Image()
    img.src = image
    const myCanvas = document.createElement("canvas");
    myCanvas.width = img.width;
    myCanvas.height = img.height;
    const myContext = myCanvas.getContext("2d")
    myContext.drawImage(img, 0, 0);
    return myContext.getImageData(0, 0, myCanvas.width, myCanvas.height)
  }

对应的解密办法

function decrypt(watermarkImage) {return new Promise((resolve, reject) => {const img = new Image()
        img.onload = function () {const myCanvas = document.createElement("canvas");
          myCanvas.width = img.width;
          myCanvas.height = img.height;
          const ctx = myCanvas.getContext("2d")


          const imageData = getImageData(watermarkImage)
          var data = imageData.data;
          for (var i = 0; i < data.length; i++) {if (i % 4 == 0) {
              // 红色重量
              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(imageData, 0, 0)
          resolve(myCanvas.toDataURL("image/png"))
        }

        img.src = watermarkImage
      })
}

外围示例代码

    const image1 = createBackgroundImage('伯约', 3, 10)
    const image2 = createBackgroundImage('学', 3, 10)
    mergeData(image1, image2).then(res => {console.log('res', res)
      decrypt(image2).then(res => {console.log('finalImage', res)
      })
    })

展现下面的 res 和 finallImage 并进行比照大仙，一张是两个字：伯约另一张只有一个字：学

诚然，下面这个办法并不普适，毕竟加密解密办法都写成固定的了，不过思路是对立的，那就是都在原图的根底上批改像素点。

对于更多内容

具体能够看一下参考文章

1、https://cloud.tencent.com/dev…

2、https://www.cnblogs.com/deepr…

3、https://blog.csdn.net/qq_4419…

正文完