重新着色一组 PNG 图标

Question

我有一组 .png 格式的图标。客户希望它们有不同的颜色。我知道它们来自 glyphicons 或 fontawesome 图标字体，但我不知道它们是如何生成的。我尝试使用此命令为它们重新着色，但总是会留下一些红色，并且增加模糊值会对图像的其他部分产生负面影响：

mogrify -fuzz 41% -fill "#5DBFAD" -opaque "#ea5648" *icon.png *arrow.png *rtl.png

前图：

图像之后：

注意：如果您使用的是深色主题，请仔细观察，在彩色图标上方还有第二个深灰色图标。

我需要一种方法来摆脱这些红色的人工制品，或者需要一种方法来用我选择的颜色自己生成这些图标（完全替换 css 也是一种选择，使用图标字体、着色和动画）。同样出于未知原因，一些图标顶部有彩色图标，如下所示：

额外信息：当悬停在这些图标上时，这些图标会过渡几个像素 up/down 以显示另一个图标。这是免费的 nopCommerce 主题的一部分：http://themes.nopaccelerate.com/themes/nopaccelerate-simplex-theme-3/?utm_source=nop&utm_medium=extension&utm_campaign=extension-directory

Answer 1

您可以使用 ImageMagick 通过如下命令对输入图像的下半部分重新着色...

magick input.png -crop 1x2@ ^
   ( +clone -fill "#5DBFAD" -colorize 100 ) -delete 1 -append result.png

这仅隔离了括号内的下半部分，并使用“-colorize”为图像重新着色而不留下伪影。然后它重新组装两半以完成图标。

不幸的是，“-clone”不是“mogrify”的可用选项，因此对于这样的命令，您只需要在命令中使用“magick”和“for”循环shell处理多张图片。

该命令采用 Windows 语法。对于 *nix 系统，将续行插入符号“^”更改为反斜杠“\”并使用反斜杠“\(...\)”转义括号。

关于彩色部分在顶部而不是底部的图标，ImageMagick 可能可以确定哪一端是彩色的，但它可能会变得复杂。也许更容易手动对它们进行排序并将它们分成两组进行处理。要仅对上半部分着色，请在读取图像后添加“-rotate 180”，然后在写入结果之前再次添加“-rotate 180”。

Answer 2

您好，最好的方法是向支持团队询问此问题当您使用 nopAccelerate 的主题时，您可以通过 support(at)nopaccelerate.com 直接联系他们或前往 here 并与他们一起创建支持票。

Answer 3

我最后写了一个简单的程序来做这个，所以我在这里发布了源代码，但是 @GeeMack 的答案似乎是一个更优雅的解决方案，所以我接受了。

我的源代码： Program.cs

using System;
using System.Drawing;
using System.IO;

namespace ColorReplacer
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine($"Supplied path: {args[0]}, from color: {args[1]} to color: {args[2]}");

            FileStream fs = new FileStream(args[0], FileMode.Open);
            var image = new Bitmap(fs);
            fs.Close();

            for (var i = 0; i < image.Width; i++)
            {
                for (var j = 0; j < image.Height; j++)
                {
                    var pixel = image.GetPixel(i, j);
                    if (pixel.R == ColorConverter.RfromHex(args[1]) && pixel.G == ColorConverter.GfromHex(args[1]) && pixel.B == ColorConverter.BfromHex(args[1]))
                    {
                        image.SetPixel(i, j, Color.FromArgb(pixel.A, ColorConverter.RfromHex(args[2]), ColorConverter.GfromHex(args[2]), ColorConverter.BfromHex(args[2])));
                    }
                }
            }

            image.Save(args[0]);
        }
    }
}

ColorConverter.cs

using System.Globalization;

namespace ColorReplacer
{
    public static class ColorConverter
    {
        public static int RfromHex(string color)
        {
            if (color.IndexOf('#') != -1)
                color = color.Replace("#", "");

            return int.Parse(color.Substring(0, 2), NumberStyles.AllowHexSpecifier);
        }

        public static int GfromHex(string color)
        {
            if (color.IndexOf('#') != -1)
                color = color.Replace("#", "");

            return int.Parse(color.Substring(2, 2), NumberStyles.AllowHexSpecifier);
        }

        public static int BfromHex(string color)
        {
            if (color.IndexOf('#') != -1)
                color = color.Replace("#", "");

            return int.Parse(color.Substring(4, 2), NumberStyles.AllowHexSpecifier);
        }
    }
}

重新着色一组 PNG 图标

Recoloring a set of PNG icons

css

image-manipulation

imagemagick

glyphicons