前端盲水印

需求

给图片加上看不到的水印，当通过其他的方式可以清楚的看到图片中暗藏的水印，以此方式追溯到泄密的人

解决办法

利用canvas实现图片和水印的绘制，具体过程如下：

1. 新建canvas，宽度和高度取要加水印的图片的宽度和高度
2. 在该canvas上绘制要添加的水印文字，文字透明度设置要特别的低，但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003
3. 将该canvas转成img（为什么canvas要转成img?之前遇到canvas在移动端无法长按出现保存、转发等操作）

代码如下

// imgStr为img的dom字符串
handleImgWatermark(imgStr){
  // 获取img的src的正则
  let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
  let matched = imgStr.match(srcReg)
  // 生成canvas src是必须的，如果没有src则不处理，仍返回之间的img字符串
  if(matched && matched.length > 1){
    // 获取该img的src
    let curSrc = matched[1]
    // 如果是.gif的图片则不加水印
    if(curSrc.indexOf('.gif') > -1){
      return
    }
    let that = this
    // 计算该图片展示的宽高（这里主要是为了当图片的宽度大于设备的宽度时将图片的宽度设置为设备的宽度；如果图片的宽度没有大于设备的宽度则按图片原先的宽度展示）
    let handleObj = that.handleImgWidthAndHeight(imgStr)
    let imgWidth = handleObj.width
    let imgHeight = handleObj.height
    let image = new Image()
    image.src = curSrc
    image.setAttribute("crossOrigin",'Anonymous')
    image.onload = function(){
      // 创建canvas对象
      let cvs = document.createElement("canvas");
      // 获取canvas对象的画笔工具
      let ctx = cvs.getContext('2d');
      // 设置canvas的宽和高
      cvs.width = imgWidth || image.width
      cvs.height = imgHeight || image.height
      // 将图片绘制到画布上
      ctx.drawImage(image, 0, 0, imgWidth, imgHeight);
      // 绘制的文字
      let filltext = that.userInfo ? (that.userInfo.fullName + that.userInfo.name) : '猿辅导水印'
      // 绘制的起点
      let x = 20,y=20;
      // 在canvas图片上面绘制文字，文字所占的宽高为100*30，所以在图片上每100*30的区域都应该有一个水印
      while(x<imgWidth && y<imgHeight){
        ctx.font = "12px serif";
        ctx.fillStyle = 'rgba(0,0,0,0.01)'
        ctx.fillText(filltext,x,y)
        // 计算画水印的起始坐标
        x = (x+100) >= imgWidth ? 20 : (x+100)
        y = x === 20 ? (y+30) : y
      }
      // 将处理好后的canvas转成image
      let src = cvs.toDataURL('image/png')
      // 将原先的htm文本中该img字符串替换，之后可以渲染新的文本内容
      that.handledContent = that.handledContent.replace(imgStr,`<img src="${src}"/>`)
    }
  }
},

效果

加了水印的图肉眼看上去是这个样子的

在ps中经过图像的处理我们可以得到下图

 

可以看到隐藏的水印文字，由于我没有学过专业的图像处理技术，只能简单的看懂文字，并没有很清晰，具体如何很清晰的在不同的图像下看到暗藏的水印我觉得设计部的同事应该会很清楚