有一种功能叫 查找相似图片
js也可以简单的实现图片相似度识别

最终示例

体验地址 http://cdn.magiczhu.cn/index.html
代码戳这里

实现原理&步骤

读取本地文件 - 网络图片可以省略这一步
压缩图片 - 不用处理超级多的图片像素
图片灰度化 - 便于比较特征
提取特征指纹 - 取灰度的平均值大的是1 小的是0
计算汉明距离 - 简单一种计算方式(还有余弦相似度等等)
得到相似度 - （特征字符串长度-汉明距离)/特征字符串长度

具体实现

读取本地文件

关于FileReader可以到这里

    //读取本地文件返回 src可用值function readFile(file) {return new Promise((resolve) => {const reader = new FileReader();reader.readAsDataURL(file);reader.addEventListener("load", function () {resolve(reader.result);}, false)})}

压缩图片

利用了canvas 当设置一个较小的宽高时会自动合并相似的像素的特性

    function compressImage(imgSrc, imgWidth = 50) {return new Promise((resolve, reject) => {if (!imgSrc) {reject('imgSrc can not be empty!')}const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const img = new Image()img.crossOrigin = 'Anonymous'img.src = imgSrcimg.onload = function () {canvas.width = imgWidthcanvas.height = imgWidthctx.drawImage(img, 0, 0, imgWidth, imgWidth)const imageData = ctx.getImageData(0, 0, imgWidth, imgWidth)let info = {dataUrl: canvas.toDataURL(),imageData,}resolve(info)}})}

图片灰度化

灰度化，在RGB模型中，如果R=G=B时，则彩色表示一种灰度颜色，其中R=G=B的值叫灰度值，因此，灰度图像每个像素只需一个字节存放灰度值（又称强度值、亮度值），灰度范围为0-255。

灰度化公式

    //根据rgb值算出灰度值function getGrayFromRGB(R, G, B) {let a = Math.pow(R, 2.2) + Math.pow(1.5 * G, 2.2) + Math.pow(0.6 * B, 2.2);let b = 1 + Math.pow(1.5, 2.2) + Math.pow(0.6, 2.2);return parseInt(Math.pow(a / b, 1 / 2.2))}//根据rgba数组生成 imageData 和dataUrlfunction createImageData(data) {const canvas = document.createElement('canvas')canvas.width = 50canvas.height = 50const ctx = canvas.getContext('2d')const imgWidth = Math.sqrt(data.length / 4)const newImageData = ctx.createImageData(imgWidth, imgWidth)for (let i = 0; i < data.length; i += 4) {newImageData.data[i] = data[i]newImageData.data[i + 1] = data[i + 1]newImageData.data[i + 2] = data[i + 2]newImageData.data[i + 3] = data[i + 3]}ctx.putImageData(newImageData, 0, 0);return {dataUrl: canvas.toDataURL(),imageData: newImageData}}//灰度化function grayImage(imageData) {let data = imageData.data;let len = imageData.data.length;let newData = new Array(len);for (let i = 0; i < len; i += 4) {const R = data[i];const G = data[i + 1];const B = data[i + 2];const grey = getGrayFromRGB(R, G, B);newData[i] = grey;newData[i + 1] = grey;newData[i + 2] = grey;newData[i + 3] = 255;}return createImageData(newData);}

参考文章中直接使用rgb的平均值
{.is-warning}

提取特征指纹

就是这个灰度值和所有灰度值的平均值比较大的为1小的为0 连在一起的字符串

    function HashFingerprint(imageData) {const grayList = imageData.data.reduce((pre, cur, index) => {if ((index + 1) % 4 === 0) {pre.push(imageData.data[index - 1])}return pre}, [])const length = grayList.lengthconst grayAverage = grayList.reduce((pre, next) => (pre + next), 0) / lengthreturn grayList.map(gray => (gray >= grayAverage ? 1 : 0)).join('')}

计算汉明距离

汉明距离是以理查德·卫斯里·汉明的名字命名的。在信息论中，两个等长字符串之间的汉明距离是两个字符串对应位置的不同字符的个数。换句话说，它就是将一个字符串变换成另外一个字符串所需要替换的字符个数。例如：
1011101 与 1001001 之间的汉明距离是 2。
2143896 与 2233796 之间的汉明距离是 3。
“toned” 与 “roses” 之间的汉明距离是 3。

   function getHm(str1,str2){let distance=0;let len = str1.length;for(let i=0;i<len;i++){if(str1[i]!=str2[i]){distance++;}}return distance}

得到相似度

相似度公式：（特征字符串长度-汉明距离)/特征字符串长度

    //相似度function getSimilarity(strLen,hm){return parseInt((strLen - hm)/strLen*100)}

参考文章 https://mp.weixin.qq.com/s/oOlv9cbIhSwJtb-mGU8gwg

javascript原生实现图片相似度识别算法相关推荐

图片相似度识别算法,百度图片识别算法
图像识别算法都有哪些图像识别算法:1人脸识别类(Eigenface,Fisherface算法特别多),人脸检测类(j-v算法,mtcnn)2车牌识别类,车型识别类(cnn)3字符识别(cnn)... ...
广告行业中那些趣事系列39：实战广告场景中的图片相似度识别任务
导读:本文是"数据拾光者"专栏的第三十九篇文章,这个系列将介绍在广告行业中自然语言处理和推荐系统实践.本篇从理论到实践介绍了广告场景中的图片相似度识别任务,对于希望解决图片相似度识 ...
图片相似度识别算法公式,图片相似度检测算法
计算图像相似度的算法有哪些 SIM=StructuralSIMilarity(结构相似性),这是一种用来评测图像质量的一种方法. 由于人类视觉很容易从图像中抽取出结构信息,因此计算两幅图像结构信息的相 ...
图片相似度识别_deepface:人脸识别\特征分析
2021微众银行第三届金融科技高校技术大赛战火再次蔓延,硝烟四起,伙伴约你组团来战! 46万奖金池,名企大厂实习机会随你挑,与小伙伴一起开启属于你的人工智能新时代! deepface是python的轻 ...
java计算图片相似度_图片相似度比较--算法
最近由于要租房,所以下载了58同城的APP,在找个人房源过程中发现,58同城会把图片相似的发帖纪录被标志出来,并警告用户此信息可能是假的.这里不讨论58同城的这方面做得人性化.而是就图片相似度算法来做 ...
php 图片相似度对比算法,php比较图片相似度代码示例
/** * 图片相似度比较 * * @version $Id: ImageHash.php 4429 2012-04-17 13:20:31Z jax $ * @authorjax.hu * www. ...
php 图片相似度对比算法,图像处理技术之图片相似度比较
Today,工作中发现需要去除图片上的水印,由于涉及文章太多,手动重新编辑很慢且容易出错.于是想到了使用脚本比较全部图片的相似度,然后替换文件的方式来达到去除水印效果.在完成这项工作前,我们需要找到所 ...
图片相似度——hash算法简介
一.均值hash 均值hash方法是对每幅图片生成一个"指纹"字符串,然后通过比较不同图片的指纹来确定图片的相似性,比较结果越接近,则说明图片越相似. 计算均值hash的步骤. ...
java phash算法图片_图片相似度——hash算法简介
一.均值hash 均值hash方法是对每幅图片生成一个"指纹"字符串,然后通过比较不同图片的指纹来确定图片的相似性,比较结果越接近,则说明图片越相似. 计算均值hash的步骤. 1 ...

javascript原生实现图片相似度识别算法