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

Question

我有一张 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的方法来实现这个？

Answer 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()）） ;