# 图像相似度

**Repository Path**: zhangxinxu/image-similarity

## Basic Information

- **Project Name**: 图像相似度
- **Description**: 判断图像，或者图像部分区域是不是在视觉上接近纯色，ES6+
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 2
- **Created**: 2021-06-27
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图像相似度

#### 介绍
判断图像，或者图像部分区域是不是在视觉上接近纯色。

#### 使用说明

本JS的执行依赖于 color-thief.js，本项目中的 color-thief.js 做过一点自定义，使其支持部分区域取色的选择，使用原项目JS可能会没有效果。

使用示意：

```html
<script src="./color-thief.js"></script>
<script src="./image-similarity.js"></script>
```
 
全局暴露了2个方法，一个是 `imageSimilarityValue()` 方法，语法如下：

```js
imageSimilarityValue(src, bounding)
```

其中：
`src` 是任意格式的图像地址。
`bounding` 是图像上局部区域的尺寸设置，格式是数组，需要4个数组项，都是数值，分别表示坐标和宽高，例如 `[10, 10, 300, 100]` 表示判断原始图像左上角坐标是 10,10，宽高是 300x100 的矩形区域的视觉色彩是否丰富。

返回值是个Promise，通常使用示意。

```js
imageSimilarityValue(src, bounding).then(result => {
    // result
});
```

其中 `result` 是个对象，格式如下所示：

```js
{
    colors: ['rgb(0,0,0)', ...],
    similarity: 0-255
}
```

`colors` 是图像限制在特定尺寸后选取的4个主要颜色，`similarity`是这些颜色的平均相似度值。

第二个方法是`imageSimilarity()`方法，语法如下：

```js
imageSimilarity(src, bounding).then(similarity => {
    // similarity是数值
});
```

这里的 `similarity` 是整数值，范围从0-5，分别表示相似的程度，值越小则越相似。

这是当前JS项目内置的规则：

```js
// 0 极度相似
// 1 相似
// 2 不太相似
// 3 不相似
// 4 差异较大
```

`imageSimilarity()` 方法底层依赖的就是 `imageSimilarityValue()` 方法，这里的 `similarity` 其实就是把 `imageSimilarityValue()` 方法中返回的 `similarity` 值和 50 相处取了个整。

为什么取50，全是作者自己的感觉，所以，这个相似度的阈值选择可能是不准确的，大家可以根据自己实际需求进行调整。

#### 其他

* 实现原理可参考这里：<a href="https://www.zhangxinxu.com/wordpress/?p=9982">https://www.zhangxinxu.com/wordpress/?p=9982</a>
* 项目中的 demo2.html 需要 http/https 协议访问，直接 file 协议打开无效，demo.html没有此限制。
* MIT Licence