前端盲水印_前端代码review

全栈程序员站长

发布于 2022-11-17 13:01:49

8090

发布于 2022-11-17 13:01:49

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

需求

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

解决办法

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

新建canvas，宽度和高度取要加水印的图片的宽度和高度
在该canvas上绘制要添加的水印文字，文字透明度设置要特别的低，但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003
将该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}"/>`)
    }
  }
},