前端盲水印_前端代码review

全栈程序员-站长 • 2025年6月23日下午2:22 • 未分类 • 阅读 4

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

需求

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

解决办法

利用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}"/>`)
    }
  }
},

Jetbrains全家桶1年46，售后保障稳定