图片近似度对比_JS实现图片相似度的判断

一、图片近似度对比

开门见山，不绕弯路。

用的是这个项目：

之所以选择这个项目，是因为该项目提交记录较为频繁，同时文件版本也相对更新。

案例先行

不管怎样，先看对比效果。

您可以狠狠地点击这里：JS实现图片对比差异参数demo

首先，挑选两张形态类似的图片，比如选用我的CSS书籍的封面，然后启动对比功能，接下来便会出现以下界面展示的内容：

相似程度大约为半数，这两幅图像布局相近，大小略有出入，色调存在差异，文字表述也有区别，百分之五十的出入达到了预期标准。

接下来，挑选两张外观迥异的图像，比如选用我的俊美照片

观察可知差异极小，数值几乎为0，二者相去甚远，毫无参照价值。

最终，展示界面能够选取本地图像执行相像度检测，用户可以导入个人电脑中的照片，来观察最终成效。

例如，我挑选了下面呈现的两个图像，获得了彼此之间关联性很强的比较效果，数值上非常接近

高达0.83，这是一个比较高的对比值了。

使用总结

依照我的体验，若对比度低于0.4，便表明存在显著不同，数值越低，显然分歧就愈发明显。

二、使用说明

官方示意的代码是npm包引入，如下：

npm install ssim.js

import ssim from "ssim.js";
加载名为img1的图片文件，路径为当前目录下的img1jpg
加载名为img2.jpg的图片文件，将其存储在变量img2中，作为图像资源使用
计算了两组图像的相似度，得到了数值和评估结果，数值用来衡量相似程度，评估结果用来判断性能表现。
输出SSIM指标为mssim，性能消耗为performance毫秒。

那些先前提及的方式，其实并不存在，我查看了ssim的JS代码，里面完全找不到这个词语。

而这里的img1和img2并非图像成分，而是实体，能够借助成分获取，采用括号运算。

代码示意：

// 图片转imageData需要的canvas
// 为了节省开销，就在外面定义，只用这一个玩耍了
新建一个画布元素，并将其赋值给canvas变量，通过document对象创建
获取画布的绘图环境，并设置相关参数，包括，绘制模式，
    willReadFrequently: true 
});
// image 转 imagedata的方法
定义一个名为image2data的函数，接收两个参数img和flag，通过箭头函数实现，内部结构省略
画布的宽度和高度分别是多少，请告知，谢谢
画布清除起始坐标为横纵零点，清除区域横宽为宽，纵高为高。
图片通过绘制函数被加载，起始坐标为横纵坐标零点，绘制区域宽度为指定值，高度同样为指定值。
获取当前画布的像素数据,起始坐标为横坐标零,纵坐标零,宽度为width,高度为height。
};

在使用方法之前，需要先给元素设置高宽属性。

如果是Web直连引用

直连引用的话，使用下面示意的代码：

前面提供的演示页面就是使用直连引用的方式实现的。

更具体的使用细节直接参阅demo演示页面的源码即可。

三、应用场景，结束语

图片相似度的应用通常都与图片序列相关。

如果GIF动图需要压缩处理，可以移除那些高度相似的连续画面，仅保留起始帧，并且把该帧的播放时长适当延长。

如今网络技术对于这种需求已经相当完善，特别是存在一个接口，能够便捷地解析GIF图像。

又例如对识别视频素材的转场画面等。

此外，素材的体积不决定辨认的精确度，却关系到辨认的效率。

就是1024乘以1024的图像对照情况，跟128乘以128的图像对照情况差别很小，不过运行效果的区别就非常显著了。

因此，有个小建议，拿取图像信息时，要画在恰当尺寸的载体上，不必依照原始图像的规格来创作，除非你的相似度检测只是临时性的任务，而非大规模的处理流程。

好的，就讲到这里，一项微不足道的技能沉淀，也许在某个时刻就能派上用场。

感谢阅读，欢迎分享，以及圣诞节快乐！