如何向图像添加滤色器，以使其平均 RGB 更接近该颜色？

Posted 2023-03-16

【中文标题】如何向图像添加滤色器，以使其平均 RGB 更接近该颜色？

【英文标题】：How do I add a color filter to an image so that its average RGB gets closer to that color?

【发布时间】：2021-12-25 05:51:49

【问题描述】：

我有一张 100x100 的图片：

<img id="my-face" src="/my-face.jpg" />

我得到了它的所有像素和我calculate the average RGB该图像：

let img = document.getElementById('my-face')
let avgRgbOfImg = getAverageRGb(img)

我还有一个不同颜色的参考 RGB：

let refRgb = [255, 244, 50] // yellow

我知道现在想为图像添加一个过滤器，以便avgRgbOfImg 非常接近我的refRgb：

addFilter(refRgb).to(img)
let newAvgRgb = getAverageRGb(img) // should be pretty close to `refRgb` (yellow)

简单来说，我有一张图片，我想使用画布（或 p5.js）为其添加一个颜色过滤器，以便它的 avgRgbOfImg 非常接近那个颜色。

有没有一些canvas/p5的方法来实现这个？

【问题讨论】：

为每个像素添加差异？注意饱和度/削波。

【参考方案1】：

使用 RGB 获得平均颜色的有趣方法。

过去我回答过一个类似的问题，但doing basic image search based on average colour。我使用了 Lab* colour space 而不是 RGB 颜色空间，它是一种感知颜色空间。我只是使用了rgb2xyz -> xyz2lab 的这个实现和来自here 的返回公式（如果你取出一些关键字和类型，那么语法几乎就是javascript btw）

您可能会得到稍微好一点的结果，但根据您发布的演示，希望不会有太大的不同。它是否证明了复杂性是合理的：不确定。

说到复杂性，您可以一直使用深度神经网络。快速搜索，Progressive Color Transfer with Dense Semantic Correspondences 和 related implementation。也许以一种迂回的方式，可以训练 PyTorch 模型并将其导出到 Tensorflow.js (PyTorch -> ONNX -> TensorFlow -> TensorFlow.js) 并直接使用或与ml5.js similar to the StyleTransfer model 集成。 也许它会产生有趣的结果，但它肯定会是一个复杂的方法。

如果您已经知道图像的平均 RGB 颜色，并且您正在寻找近似值/类似的外观，那么只需通过 tint() 为图像着色即可“伪造它”。您甚至可以使用 4th(alpha) 参数控制色调量：

// apply 50% of refRgb
tint(refRgb[0], refRgb[1], refRgb[2], 128);
image(theImageYouWanTinted, 0, 0);

当然输出将是源图像和 refRgb 的混合，但它非常容易测试它是否在视觉上达到了您的目标。

然后你可以扩展并尝试其他事情，例如：

使用要着色的图像的灰度版本，而不是 rgb 版本 基于图像内容的单一颜色通道可能会具有更多主导/吸引人的特征（例如，使用红色、绿色或蓝色通道作为灰度而不是真正的灰度） 进一步过滤源图像以尝试提取相关信息（例如，使用中值滤波器对图像进行一点平滑，尝试使用低通滤波器等）

很难衡量事情需要多么精确和复杂：我会先选择tint()。 （如果您需要将着色结果“冻结”为像素，请记住，您始终可以获得使用get() 绘制的内容的“快照”，并且可以使用 p5.Graphics 层实现更复杂的事情（参见createGraphics()）） ;

【讨论】：

将图像转换为灰度图像然后简单地将其着色为所需颜色的想法非常简单和容易，结果几乎就是我想要的，所以谢谢！