1

我想为具有透明背景和阴影的精灵/图标着色。我尝试将色调转移到所有像素，但它看起来不太自然，并且图像中的黑色和白色存在问题。如果图像趋于黑色，则色调不会将黑色变为红色或其他颜色，即使是 360 度也不会改变。试图让颜色上瘾和减少颜色，即使在这种情况下，黑色和白色也往往会被着色或完全消失。

也许我应该在图标上放一张图片来达到着色效果？关于如何进行的任何建议。我输了。

4

2 回答 2

1

你一直在问很多关于这个色调变化的事情，所以我想我会试着举一个例子：http: //jsfiddle.net/EMujN/3/

这是另一个使用实际图标的：http: //jsfiddle.net/EMujN/4/

里面有很多。有一个巨大的数据 URL，除非你想替换它，否则你可以忽略它。这是我们修改 HSL 的相关部分。

    //SHIFT H HERE
    var hMod = .3;
    hsl[0]=(hsl[0]+hMod)%1;

    //MODIFY S HERE
    var sMod = .6;
    hsl[1]=Math.max(0,Math.min(1,
        hsl[1]+sMod
    ));

    //MODIFY L HERE
    var lMod = 0;
    hsl[2]=Math.max(0,Math.min(1,
        hsl[2]+lMod
    ));

我已转换为 HSL，因为它比 RGB 更容易在该颜色空间中完成您想要的。

无需变得更复杂，您可以调整三个变量：向色调、饱和度或亮度添加多少。我将亮度变量设置为 0，因为任何更高的值，您都会看到一些令人讨厌的 JPEG 伪影（如果您能找到一个像样的 .png 会更好，但我选择了我能找到的第一张 CC 夜间图像）。

我认为色调偏移（从黄色到绿色）看起来相当不错，而且我已经将饱和度最大化，所以即使是正常的白光也会出现明亮的紫色。就像我在评论中所说的那样，如果你想给黑白片上色，你需要增加亮度和饱和度。希望你能从这个例子中弄清楚你需要什么。

使用的图片：http ://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg

于 2013-10-11T13:21:34.620 回答
0

我自己找到了一个更好的解决方案，可以解决黑白问题。

所以基本上解决方案可以通过多个步骤来解决。在这里，我将定义步骤。稍后我将提供一些工作代码：

  • 获取图像
  • 计算主要颜色，平均图像像素或简单地提供一个输入 RGB 值，这是您的眼睛可以捕捉到的主要颜色。
  • 如果主要倾向于黑色或白色，或两者兼而有之，则必须使用上瘾或减色方法重新着色图像，如果黑色上瘾，如果白色则减色。所以基本上所有的 RGB 像素都应该被衰减或锐化直到 RED。我认为最好的解决方案应该是 RED，因为 RED 在 HUE 比例中是第一位的，这在我们对像素进行色相偏移时会有所帮助。
  • 为了有一个独特的算法可以处理不同类型的图像，不仅是黑色为主或白色，理想情况下，非黑色和非白色为主的图像的输入应该手动预色相，使用 Photoshop 或以某种方式使用另一种算法新的主色结果也是红色
  • 在那之后，色相变化的颜色是直截了当的。我们知道所有图像的主要颜色都是红色，我们将使用所需颜色的 HSV 值和主要颜色 (RED) 的 HSV 之间的差异来移动 HUE 值。
  • 游戏结束。我们有一种非常通用的方法来以自然的方式通过色调变化为不同的图像着色。
    • 另一个问题可能是如何自动预移位主要颜色不是黑色或白色的输入图像。但这是另一个问题。

    为什么这种着色方法可以被认为是自然的。简单地考虑一件事。通常，非主要的黑色或白色是阴影和光线的一部分，为图像提供 3D 感觉。另一方面，如果我的鞋子是 100% 黑色的，并且我会给它们染色一些颜色，它们就不再是黑色的了。简单地改变 HSV 参数不能实现以黑色为主的颜色，但应执行其他步骤。步骤如上所述。

    于 2013-10-14T17:22:23.283 回答