Skip to main content

图片复杂度识别技术

应用场景：在图片上显示文字，如果图片颜色较为单一则直接显示文字，如果图片花里花哨则文字显示区域进行高斯模糊，再显示文字。

一、颜色相似度判断原理​

颜色相似度的判断，也被称为颜色差异判断（Color Difference），常见算法有下面这几个：

1、纯粹的颜色距离判断​

取 R、G、B 三个色值的平方差：

2、加上权重进行判断​

因为人对 R、G、B 不同色值差异的感受程度是不一样的，所以可以增加或减少权重的方式计算颜色的相似度。

常见的做法是使用 2、4、3 权重法，具体算法如下图所示：

3、加权算法优化​

对应 JS 代码如下：

const colorDistance = function (arrRGB1, arrRGB2) {
  const [r1, g1, b1] = arrRGB1
  const [r2, g2, b2] = arrRGB2

  const rmean = (r1 + r2) / 2

  const r = r1 - r2
  const g = g1 - g2
  const b = b1 - b2

  return Math.sqrt(
    (2 + rmean / 256) * r * r + 4 * g * g + (2 + (255 - rmean) / 256) * b * b
  )
}

二、获取区域主题色进行判断​

点击查看如何获取图片颜色主题色

1、整图提取主题色产生的误差​

一般对整张图片进行颜色相似度判断，会有误差，例如：

以上图片获取的 4 个主题色分别为：

一般是对 4 个颜色互相对比相似度，剔除那个和其他 3 个色值差异最大的色值，使用剩余的 3 个值进行平均相似度计算，但这里剔除的颜色却是占比最大的深色，显然产生了误差。

因此，现在要做的就是增强颜色相似度的判断，减少判断误差。

2、尺寸缩小绘制判别法​

这个方法原理就是缩小原图，这样浏览器会自动进行一定范围内的色彩融合，使得图像中占比较小的颜色被冲淡，甚至不可见，从而减少提取到的主题色误差。

例如，拍了张星空图片，上面有很多星星，如果把这种图片缩小，则星星就会因为像素点不足，直接就看不到了。

操作：

上图原图尺寸是 518 × 347，可以把 Canvas 画布的尺寸设置为 1/13 并绘制图像，作为取色图。

var canvasWidth = 518 / 13;
var canvasHeight = 347 / 13;

得到的 4 个主题色为：

这时再代入计算颜色相似度就可以大大减少误差了。

注意：尺寸缩小的比例系数建议使用 13、17、23 这样的质数，可以尽可能地触发颜色的补偿计算，结果会更加准确。

三、使用 image-similarity.js 库判断​

image-similarity.js 可以判断图像指定区域是否接近纯色。