LooksSame
Node.js library for comparing PNG-images, taking into account human color perception. It is created specially for the needs of visual regression testing for gemini utility, but can be used for other purposes.
pixelmatch
The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.
Features accurate anti-aliased pixels detection and perceptual color difference metrics.
Inspired by Resemble.js and Blink-diff. Unlike these libraries, pixelmatch is around 150 lines of code, has no dependencies, and works on raw typed arrays of image data, so it’s blazing fast and can be used in any environment (Node or browsers).
Resemble.js
Analyse and compare images with Javascript and HTML5. More info & Resemble.js Demo. Compatible with Node.js >8.
blink-diff
A lightweight image comparison tool
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTVw14G8-1659082104586)(/api/project/10755416/files/28523803/imagePreview)]
Pixel-Diff(blink-diff的延续)
图片对比的常规方案是将一个原始图片进行灰度化后再生成差值图，最后进行图片对比。但是这种方案在页面元素轻微平移后，对比的结果就不准确了。我们在生成差值图后，增加了形态学膨胀和形态学腐蚀两步关键操作，膨胀是为了把离散的差值像素点膨胀成一个一个连通区域，连通以后为了避免连通区域扩大再进行一次腐蚀，这样就会把各个离散的像素点都组成区域。
现在看一下SSIM，自然图像信息高度结构化，像素信息具有强烈的依赖性，在空间上接近时依赖性携带关于视觉场景中的对象结构信息，SSIM算法的优势在于契合人类的视觉系统的观察特性，它的实现主要是通过亮度、对比度和结构的度量组合来实现的相似度的评估。
接下来看一下感知哈希的算法，图像都是二维信号，包括不同频率的部分，亮度比较小的频率是低频的部分，实际上在左边的第二张图就是一个低频部分，但是实际上，通过肉眼来看低频部分基本上是这张图的信息了。再就是亮度变化剧烈的区域实际上是高频部分，高频部分肉眼基本上看到是一块黑或者一块蓝的区域。所以要通过下采样提取低频信息。
提到了感知哈希一般都会与均值哈希进行对比，均值哈希的实现，首先将图片缩放成8乘8的尺寸，再把图片灰度化，之后再进行二值化求值，然后对平均值进行计算以后得到哈希指纹。均值哈希实际上有一些缺点，对它进行伽马校正或直方图均衡会影响均值，从而影响hash值。现在业界大多应用感知哈希，是把图缩放到32乘32的尺寸，通过离散余弦变换来获得低频部分，离散余弦变换后有一个8乘8矩阵的低频部分映射到左上角了，大家看到蓝图就是高频的部分，提取出来左上角8乘8部分算出来指纹就会比较稳定。
这是最后对比出来的实际结果，首先进行预处理，识别出来上面的导航栏的特征和下面的虚拟按键的特征，因为会干扰对比切掉了。然后两张图进行元素提取，把一些元素提取出来后去另外一张图搜索，搜索不出来的就是两张图的结构差异，这里面可以看到，toast就是差异，对于右图来讲toast遮挡的7、8、9、完成等元素，所以会把位置整体框出来。
3.2 图片对比算法优化
MyDiff 在常规方案中加入了形态学的一些算法操作，在获取像素差值图后，对差值图首先进行形态学膨胀处理，将分散的差值像素点膨胀成一个个连通区域。为避免膨胀后差异区域扩大，在形成连通区域后再对其进行形态学腐蚀。这样就能将原本分散的像素点或小区域，融合成一个个连通区域，差异区域的标记也更加友好。原本一串文本不同，通用算法会标记出多个区域，由于字符间欧式距离很小融合后会形成完整的一个连通区域。差异区域融合后，后续模板匹配的性能与精准性也会更好。
【NCTS峰会回顾】阿里巴图：基于图片对比的页面自动化测试实践
基于图片对比的页面自动化测试实践
图像处理-图像差异识别-图像标定
难点：
另外:opencv.js也可以作为图像处理的工具