用canvas和js改变图像中相似像素的颜色

问题描述 投票：0回答：3

我正在寻找一种算法或代码来在客户端查找相似的像素（具有相似颜色的像素）并更改这些像素的颜色。我搜索了很多，但找不到任何寻找相似像素的公式。我想做的东西就像 Photoshop 中的魔棒工具。因此，使用此工具，我们可以对产品的某些部分进行着色以制作自定义颜色。另外，我们在生产中对颜色有一些限制，我们只能使用一些颜色。 我试图找到一个带有一些公式的逻辑，例如：使用画布和java脚本查找每个像素与其邻居像素的欧几里德距离，并比较数量。但它运作得不太好。缺点是每张图片都有颜色相似但色调不同的像素。该算法在寻找不同色调方面不是很聪明。但在 Photoshop 中，我们可以使用魔棒工具选择具有相同颜色的区域，然后使用“相似”选项将该区域扩展到相似的色调。

javascript html5-canvas rgb pixel
3个回答
0
投票

到目前为止你有什么？如果您分享迄今为止编写的相关代码（即搜索像素、比较像素颜色...）将会很有帮助

如果您还没有，您可能想熟悉一下floodfill算法。这将是您的遍历算法的基础。

据我了解，颜色比较并不是一个完全解决的问题。三维欧氏距离测量不是一个坏主意，并且是一个易于实施的简单解决方案。 这篇文章建议“[计算]所选颜色中每个分量与当前颜色之间的绝对差异。我们说两种颜色之间的差异是各个颜色分量之间的最大差异。”

但是，人类不会将颜色差异视为红、绿、蓝特征的差异。

您有兴趣阅读的另一页：如何比较两种颜色的相似性/差异。该问题的一个答案建议计算颜色的 HSL 值，然后使用以下公式： avghue = (颜色1.色调 + 颜色2.色调)/2 距离=abs(color1.hue-avghue)

如果您想了解一些颜色理论，Delta-E可以帮助您深入了解颜色差异。

0
投票

您的解决方案可能是让您的用户挥舞魔杖！

因此，与其通过用魔棒单击来选择一种颜色，不如让用户在多个像素上拖动魔棒如何？

累积用户拖动的任何独特颜色。

然后根据累积的一组颜色而不是一种颜色进行颜色更改。

是的，它不像 Photoshop 的魔棒公差设置那么自动，但替代人眼/大脑也不会全是坏事！

@Austin 关于颜色理论与人眼协调不佳的说法是正确的。欧几里德方法将进行数学颜色匹配...但是人眼对于如何感知颜色非常挑剔。

你提到“不同的色调”...

您可能会考虑以 HSL 颜色格式呈现图像，以便更轻松地进行颜色比较。

HSL 不像 RGB 那样进行颜色混合，而是将颜色分解为色调（颜色）、饱和度（深度）和亮度（嗯，亮度）。

在 HSL 中，所有色调（颜色）均按算术分组在一起，因此您可以请求指定蓝色加上 10 个最接近的蓝色色调中的所有蓝色。

0
投票

我没有答案，但是..

基本上理论上你要做的就是比较两个 RGB 值并计算差异。 我现在正在研究这样的洪水填充算法，并提出了以下建议：

function isRGBinThreshold(rgb, rgb2, threshold = 0) {

  var isRedPassed = false,
      isGreenPassed = false,
      isBluePassed = false;

  if(rgb.r >= rgb2.r - threshold && rgb.r <= rgb2.r + threshold) {
    isRedPassed = true;
  }
  if(rgb.g >= rgb2.g- threshold && rgb.g <= rgb2.g + threshold) {
    isGreenPassed = true;
  }
  if(rgb.b >= rgb2.b - threshold && rgb.b <= rgb2.b + threshold) {
    isBluePassed = true;
  }

  if(isRedPassed && isGreenPassed && isBluePassed) {
    return true;
  }else {
    return false;
  }
}

但不幸的是，它似乎并没有像我想象的那样起作用。 Photoshop 中的“魔棒”工具灵敏度参数范围在 0 - 255 之间，因此我认为这可能是一个 RGB 值之间的最大差异，但事实证明并非如此。如果有人知道答案，请随时纠正我

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.