网站 › 『动画发布区』 › 图片去水印功能的实现

xue5hen 发表于 2022-12-16 12:04

图片去水印功能的实现

本帖最后由 xue5hen 于 2022-12-16 12:49 编辑

    【原理分析】
    为了便于分析原理，我写了一个简单的Demo，如下图所示，在Demo页面中有三张单色图片，第一张原始图是颜色为#999的灰色图片，第二张水印图是颜色为#fff透明度为0.7的图片，第三张结果图是前两张图片合成以后得到的图片。

    在右侧的控制台打印出了这三张图片的数据（数据是通过canvas画布中的getImageData方法获取到的），从数据中可以看到，三张图片的宽高均为100像素，数据长度均为40000。可以看出，每张图片有100*100个像素点，每个像素点用4个长度来表示，分别是R（红）、G（绿）、B（蓝）、A（透明度）。
    接下来，对比下三张图片数据有何不同，原图片和水印图的数据是怎么得到结果图的数据的？稍微想一下，应该可以得出一个思路：水印图的透明度为0.7，意味着它的色值在结果图中占的比重是70%，原始图因为被水印图遮挡，所以占的比重是剩余的30%。于是，153 × 0.3 + 255 × 0.7= 224.4，向上取整后为225，正好与结果图中数据相等。
    【功能实现】
    实践是检验理论的唯一手段。根据上述猜测的计算方式，如果已知结果图和水印图，那么应该就可以推算出来原始图。不过需要准备好与待处理图片相对应的水印图片，确保它们的尺寸大小和水印位置是一致的，否则靠程序自己去猜测水印位置的话，需要额外复杂的算法和很大的计算量支撑。
    这里我设计的程序界面如下：

    程序上方是参数配置，可以设置水印图片和下载目录，左侧区域是待处理图片列表区，可以将待处理的图片拖拽进来，右侧区域是图片预览区域，点选左侧某一条数据可以对其进行预览。
    程序去水印的关键代码如下：
// 获取imgData
getImgData (imgObj) {
    let canvasObj = document.createElement('canvas')
    canvasObj.width = imgObj.width
    canvasObj.height = imgObj.height
    let ctx = canvasObj.getContext('2d')
    ctx.drawImage(imgObj, 0, 0, canvasObj.width, canvasObj.height)
    let imgData = ctx.getImageData(0, 0, canvasObj.width, canvasObj.height)
    return imgData.data
}
let imgData = this.imagesList.imgData
let imgData_sy = this.watermarkInfo.imgData
if (imgData.length !== imgData_sy.length) {
    this.$toast('待处理图片与水印图片大小不一致')
    return reject('待处理图片与水印图片大小不一致')
}
let bakColor = null
for (let i = imgData.length - 4; i > -1; i -= 4) {
    if (!imgData_sy) {
      bakColor = , imgData, imgData, imgData]
      continue
    } else if (imgData_sy === 255 && bakColor) {
      imgData = bakColor
      imgData = bakColor
      imgData = bakColor
      imgData = bakColor
      continue
    }
    let opacity_sy = imgData_sy / 255
    let opacity_raw = (255 - imgData_sy) / 255
    imgData = (imgData - imgData_sy * opacity_sy) / opacity_raw
    imgData = (imgData - imgData_sy * opacity_sy) / opacity_raw
    imgData = (imgData - imgData_sy * opacity_sy) / opacity_raw
    if (imgData > 0 && imgData < 255) {
      imgData = (imgData - imgData_sy) / opacity_raw
    }
}
this.imagesList.imgData = imgData
// imgData2dataUrl
let canvasObj = document.createElement('canvas')
canvasObj.width = item.imgObj.width
canvasObj.height = item.imgObj.height
let ctx = canvasObj.getContext('2d')
let imageData = new ImageData(imgData, canvasObj.width, canvasObj.height)
ctx.putImageData(imageData, 0, 0)
   经测，常见的水印可以正常去除；对于不透明的水印，这里采用的是使用附近的图片色值来替代；假设原始图片本身也是半透明，这种情况下，透明度好计算，但色值计算存在些许误差，不过好在这种情况在现实中相对较少。
    图片去水印这种功能，用图文表达多少有点苍白，附上视频展示：https://www.bilibili.com/video/BV1KV4y1A7wT/

xiaojian40 发表于 2022-12-16 12:55

iore 发表于 2022-12-16 12:13
嗯，有时候水印确实很恶心

有没有可能，你说的是马赛克..{:1_886:}

文人墨客 发表于 2022-12-16 12:10

这个不错。不知道怎么用

gao887 发表于 2023-10-9 22:14

xiaojian40 发表于 2022-12-16 12:55
有没有可能，你说的是马赛克..


整挺好&#128077;&#128077;&#128077;

BryanNorton 发表于 2022-12-17 20:45

谢谢分享！很NB的教程！

lxyhslx 发表于 2022-12-16 13:48

学习了但不知道怎么用

zepneg 发表于 2022-12-16 12:16

支持一下

iore 发表于 2022-12-16 12:13

嗯，有时候水印确实很恶心{:1_926:}

wanglong001 发表于 2022-12-16 12:24

✍&#127995;没有努力的梦想就是妄想

ruoshuisanqian 发表于 2022-12-16 12:34

小白学习了视频，去水印效果挺好的，期待大佬成品分享。

seawaycao 发表于 2022-12-16 12:40

谢谢分享！很NB的教程！

QFY0532 发表于 2022-12-16 12:43

文人墨客 发表于 2022-12-16 12:10
这个不错。不知道怎么用

怎么获取呢

潋天堂 发表于 2022-12-16 12:44

复杂的水印能用这种方法吗

Yangxiao112 发表于 2022-12-16 12:51

这个好，一键水印除去

查看完整版本: 图片去水印功能的实现