前端盲水印_前端代码review

前端盲水印_前端代码review需求给图片加上看不到的水印,当通过其他的方式可以清楚的看到图片中暗藏的水印,以此方式追溯到泄密的人解决办法利用canvas实现图片和水印的绘制,具体过程如下:新建canvas,宽度和高度取要加水印的图片的宽度和高度 在该canvas上绘制要添加的水印文字,文字透明度设置要特别的低,但是当水印透明度小于等于0.003,不可恢复到水印。所以我们设置透明度要不得低于0.003 将该canvas转成img(为什么canvas要转成img?之前遇到canvas在移动端无法长按出现保存、转发等操作)

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

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

需求

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

解决办法

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

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

效果

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

前端盲水印_前端代码review

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

前端盲水印_前端代码review

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/226844.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号