当颜色存储为十六进制或 RGB 值时如何搜索颜色？

Question

背景：
我们使用Vision API 来检测图像的颜色属性。颜色值作为 RGB 值存储在数据库中。我们希望用户在我们的网络应用程序中搜索颜色。

场景：
我希望用户能够搜索颜色或从下拉列表中选择颜色。结果将显示在页面上。但据我所知，我们可以通过使用文本或数字来制作搜索功能。

数据库：
我在服务器端使用 firebase firestore 和 firebase-admin。我收到颜色作为 RGB 值的响应。我在数据库中存储颜色的 RBG 值。

问题是我们如何使用 RGB 值或十六进制值进行搜索？

更新 1：

示例：
1：用户上传图像，提取颜色并存储在firestore中。
2：所以，如果用户想要搜索，他会输入红色、绿色、蓝色等。只有有限的颜色名称link。 （约 140 人）
3：用户只能搜索 140 个颜色名称（我猜）。但会有数百万种颜色组合
4：有一点是肯定的，不能在每种情况下都返回确切的颜色。
5：那么，如何返回最接近的颜色。

Answer 1

Firebase 有两个不同的数据库，即 Realtime Database 和 Firestore。我不确定您使用的是哪一个，但我认为 Firestore 是理想的。

让我们分小步进行分解：

1.使用 Cloud Vision API 并添加到 Firestore：

您可以在您的云功能、服务器或您使用它的任何地方使用 Cloud Vision API 处理您的图像，然后将数据添加到 Firestore。

//... process image
const colors = ["FF0000", "00FF00", "0000FF"]
// Assume colors is an array of hex codes of colors found in that image
// Add the image data in Firestore

await admin.firestore().collection("images").add({
  path: "path/in/storage",
  colors,
  ...otherMetaData
})

确保您添加了该图像的颜色数组和路径或 URL（只是用于定位图像存储位置的标识符）。

2。查询用户输入颜色的图片：

// Add your color picker 
const color = "FF0000" // color chosen by the user

// Make a query to Firestore from client
const snapshot = await firebase.firestore().collection("images").where("colors", "array-contains", color).get()

const images = snapshot.docs.map((img) => img.path)

现在您有一个包含用户选择颜色的图像 URL 数组。您可以类似地添加 RGBA 或 HSL 值。

Answer 2

对于 Firestore 而言，搜索给定颜色值的最接近匹配项可能会很棘手。如果您只想让您的用户从列表中选择颜色名称（红色、蓝色、绿色等），您可以将从 Vision 获得的值转换为名称并将其存储在 firestore 文档中。这样您就可以查询字符串值。如果您有多个颜色值，您也可以将它们存储在一个数组中并针对数组值进行查询。

https://www.npmjs.com/package/hex-color-to-color-name