更改图像颜色

| 我正在一个项目中，用户可以在购物车中为商品选择某种颜色。问题是有很多颜色可供选择，但制造商仅提供了一个产品图像。现在，我需要提出一种根据用户选择来更改此产品颜色的方法。这与在汽车制造商的网站上浏览非常相似...单击一种颜色时，图像将使用该颜色进行更新。任何想法如何去实现这一目标？注意：我最初的想法是使用photoshop制作一个透明图像，该图像仅包含产品的阴影细节（并且周围区域是实心/不透明的），然后以编程方式将此透明图像与具有选定颜色的另一图像合并。从理论上讲可以做到的...我只是想知道是否有人以前已经这样做过，和/或是否有更好的方法……比如也许使用photoshop滤镜等:)

已邀请:

4 个回复

骂狮淋唐便

您正在考虑的方法可能是最好的选择。与其在服务器端合并图像（假设它是Asp.net代码），不如使用javascript将图像放置在主图像上。最好的方法是加载所有彩色图像和主图像，并将彩色图像放置在主要缺陷上。使用PNG格式可获得更好的透明图像。当您知道有固定数量的颜色选项时，不必每次每个用户更改颜色时都使用服务器资源。

闪票仇门韧

如果需要着色的部分在色调方面在原始文档中是唯一的（您可以通过使用Photoshop或其他方式在源图像中对其进行更改来使其变得唯一），那么就可以做到这一点。它的工作方式是锁定输入位图（这样就可以操纵每个像素），然后将每个像素转换为HSB，以便在像素的色相（在“色相”范围内）落入特定范围时可以对其进行调整。这将具有很好的效果，因为诸如阴影和轻微变化之类的渐变也会正确着色。着色代码：

Bitmap bmp = ...
byte minHue = 0;
byte maxHue = 10;
byte newHue = 128;

...

BitmapData bmpData = bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height),
    ImageLockMode.ReadWrite, bmp.PixelFormat);
IntPtr ptr = bmpData.Scan0;
int bytes = bmpData.Stride * bmpData.Height;
byte[] rgbValues = new byte[bytes];
System.Runtime.InteropServices.Marshal.Copy(ptr, rgbValues, 0, bytes);
for (int c = 0; c < rgbValues.Length; c += 4)
{
    HSBColor hsb = new HSBColor(Color.FromArgb(
        rgbValues[c + 3], rgbValues[c + 2],
        rgbValues[c + 1], rgbValues[c]));
if(hsb.H > minHue && hsb.H < maxHue)
    {
        hsb.H = Convert.ToByte(newHue);
    }
    Color color = hsb.ToRGB();
    rgbValues[c] = color.B;
    rgbValues[c + 1] = color.G;
    rgbValues[c + 2] = color.R;
    rgbValues[c + 3] = color.A;
}
System.Runtime.InteropServices.Marshal.Copy(rgbValues, 0, ptr, bytes);
bmp.UnlockBits(bmpData);

HSBColor.cs（来自ZedGraph）：

/// <summary>
/// Hue-Saturation-Brightness Color class to store a color value, and to manage conversions
/// to and from RGB colors in the <see cref=\"Color\" /> struct.
/// </summary>
/// <remarks>
/// This class is based on code from http://www.cs.rit.edu/~ncs/color/ by Eugene Vishnevsky.
/// This struct stores the hue, saturation, brightness, and alpha values internally as
/// <see cref=\"byte\" /> values from 0 to 255.  The hue represents a fraction of the 360 degrees
/// of color space available. The saturation is the color intensity, where 0 represents gray scale
/// and 255 is the most colored.  For the brightness, 0 represents black and 255
/// represents white.
/// </remarks>
[Serializable]
public struct HSBColor
{
    /// <summary>
    /// The color hue value, ranging from 0 to 255.
    /// </summary>
    /// <remarks>
    /// This property is actually a rescaling of the 360 degrees on the color wheel to 255
    /// possible values.  Therefore, every 42.5 units is a new sector, with the following
    /// convention:  red=0, yellow=42.5, green=85, cyan=127.5, blue=170, magenta=212.5
    /// </remarks>
    public byte H;
    /// <summary>
    /// The color saturation (intensity) value, ranging from 0 (gray scale) to 255 (most colored).
    /// </summary>
    public byte S;
    /// <summary>
    /// The brightness value, ranging from 0 (black) to 255 (white).
    /// </summary>
    public byte B;
    /// <summary>
    /// The alpha value (opacity), ranging from 0 (transparent) to 255 (opaque).
    /// </summary>
    public byte A;

    /// <summary>
    /// Constructor to load an <see cref=\"HSBColor\" /> struct from hue, saturation and
    /// brightness values
    /// </summary>
    /// <param name=\"h\">The color hue value, ranging from 0 to 255</param>
    /// <param name=\"s\">The color saturation (intensity) value, ranging from 0 (gray scale)
    /// to 255 (most colored)</param>
    /// <param name=\"b\">The brightness value, ranging from 0 (black) to 255 (white)</param>
    public HSBColor(int h, int s, int b)
    {
        this.H = (byte)h;
        this.S = (byte)s;
        this.B = (byte)b;
        this.A = 255;
    }

    /// <summary>
    /// Constructor to load an <see cref=\"HSBColor\" /> struct from hue, saturation,
    /// brightness, and alpha values
    /// </summary>
    /// <param name=\"h\">The color hue value, ranging from 0 to 255</param>
    /// <param name=\"s\">The color saturation (intensity) value, ranging from 0 (gray scale)
    /// to 255 (most colored)</param>
    /// <param name=\"b\">The brightness value, ranging from 0 (black) to 255 (white)</param>
    /// <param name=\"a\">The alpha value (opacity), ranging from 0 (transparent) to
    /// 255 (opaque)</param>
    public HSBColor(int a, int h, int s, int b)
        : this(h, s, b)
    {
        this.A = (byte)a;
    }

    /// <summary>
    /// Constructor to load an <see cref=\"HSBColor\" /> struct from a system
    /// <see cref=\"Color\" /> struct.
    /// </summary>
    /// <param name=\"color\">An rgb <see cref=\"Color\" /> struct containing the equivalent
    /// color you want to generate</param>
    public HSBColor(Color color)
    {
        this = FromRGB(color);
    }


    /// <summary>
    /// Implicit conversion operator to convert directly from an <see cref=\"HSBColor\" /> to
    /// a <see cref=\"Color\" /> struct.
    /// </summary>
    /// <param name=\"hsbColor\">The <see cref=\"HSBColor\" /> struct to be converted</param>
    /// <returns>An equivalent <see cref=\"Color\" /> struct that can be used in the GDI+
    /// graphics library</returns>
    public static implicit operator Color(HSBColor hsbColor)
    {
        return ToRGB(hsbColor);
    }

    /// <summary>
    /// Convert an <see cref=\"HSBColor\" /> value to an equivalent <see cref=\"Color\" /> value.
    /// </summary>
    /// <remarks>
    /// This method is based on code from http://www.cs.rit.edu/~ncs/color/ by Eugene Vishnevsky.
    /// </remarks>
    /// <param name=\"hsbColor\">The <see cref=\"HSBColor\" /> struct to be converted</param>
    /// <returns>An equivalent <see cref=\"Color\" /> struct, compatible with the GDI+ library</returns>
    public static Color ToRGB(HSBColor hsbColor)
    {
        Color rgbColor = Color.Black;

        // Determine which sector of the color wheel contains this hue
        // hsbColor.H ranges from 0 to 255, and there are 6 sectors, so 42.5 per sector
        int sector = (int)Math.Floor((double)hsbColor.H / 42.5);
        // Calculate where the hue lies within the sector for interpolation purpose
        double fraction = (double)hsbColor.H / 42.5 - (double)sector;

        double sFrac = (double)hsbColor.S / 255.0;
        byte p = (byte)(((double)hsbColor.B * (1.0 - sFrac)) + 0.5);
        byte q = (byte)(((double)hsbColor.B * (1.0 - sFrac * fraction)) + 0.5);
        byte t = (byte)(((double)hsbColor.B * (1.0 - sFrac * (1.0 - fraction))) + 0.5);


        switch (sector)
        {
            case 0:         // red - yellow
                rgbColor = Color.FromArgb(hsbColor.A, hsbColor.B, t, p);
                break;
            case 1:         // yellow - green
                rgbColor = Color.FromArgb(hsbColor.A, q, hsbColor.B, p);
                break;
            case 2:         // green - cyan
                rgbColor = Color.FromArgb(hsbColor.A, p, hsbColor.B, t);
                break;
            case 3:         // cyan - blue
                rgbColor = Color.FromArgb(hsbColor.A, p, q, hsbColor.B);
                break;
            case 4:         // blue - magenta
                rgbColor = Color.FromArgb(hsbColor.A, t, p, hsbColor.B);
                break;
            case 5:
            default:        // magenta - red
                rgbColor = Color.FromArgb(hsbColor.A, hsbColor.B, p, q);
                break;
        }

        return rgbColor;
    }

    /// <summary>
    /// Convert this <see cref=\"HSBColor\" /> value to an equivalent <see cref=\"Color\" /> value.
    /// </summary>
    /// <remarks>
    /// This method is based on code from http://www.cs.rit.edu/~ncs/color/ by Eugene Vishnevsky.
    /// </remarks>
    /// <returns>An equivalent <see cref=\"Color\" /> struct, compatible with the GDI+ library</returns>
    public Color ToRGB()
    {
        return ToRGB(this);
    }

    /// <summary>
    /// Convert a <see cref=\"Color\" /> value to an equivalent <see cref=\"HSBColor\" /> value.
    /// </summary>
    /// <remarks>
    /// This method is based on code from http://www.cs.rit.edu/~ncs/color/ by Eugene Vishnevsky.
    /// </remarks>
    /// <returns>An equivalent <see cref=\"HSBColor\" /> struct</returns>
    public HSBColor FromRGB()
    {
        return FromRGB(this);
    }

    /// <summary>
    /// Convert a <see cref=\"Color\" /> value to an equivalent <see cref=\"HSBColor\" /> value.
    /// </summary>
    /// <remarks>
    /// This method is based on code from http://www.cs.rit.edu/~ncs/color/ by Eugene Vishnevsky.
    /// </remarks>
    /// <param name=\"rgbColor\">The <see cref=\"Color\" /> struct to be converted</param>
    /// <returns>An equivalent <see cref=\"HSBColor\" /> struct</returns>
    public static HSBColor FromRGB(Color rgbColor)
    {
        double r = (double)rgbColor.R / 255.0;
        double g = (double)rgbColor.G / 255.0;
        double b = (double)rgbColor.B / 255.0;

        double min = Math.Min(Math.Min(r, g), b);
        double max = Math.Max(Math.Max(r, g), b);

        HSBColor hsbColor = new HSBColor(rgbColor.A, 0, 0, 0);

        hsbColor.B = (byte)(max * 255.0 + 0.5);

        double delta = max - min;

        if (max != 0.0)
        {
            hsbColor.S = (byte)(delta / max * 255.0 + 0.5);
        }
        else
        {
            hsbColor.S = 0;
            hsbColor.H = 0;
            return hsbColor;
        }

        double h;
        if (r == max)
            h = (g - b) / delta;        // between yellow & magenta
        else if (g == max)
            h = 2 + (b - r) / delta;    // between cyan & yellow
        else
            h = 4 + (r - g) / delta;    // between magenta & cyan

        hsbColor.H = (byte)(h * 42.5);
        if (hsbColor.H < 0)
            hsbColor.H += 255;

        return hsbColor;
    }

}

杰黔轿缺

Scene7可以为您完成此操作，但是成本很高。

刷遍派戳

您可以使用with3ѭ数组轻松地将一个图像中的颜色映射到一组新的颜色-问题是源颜色和目标颜色。我将这样的代码与具有不同透明度的Alpha级别的单色（黑色）图一起使用（尽管您可以以相同的方式使用灰度图像），然后将比例尺中的每种颜色映射到新比例尺：

// Get the source file and create a result bitmap of the same size
using (var source = Image.FromFile(\"old colour image.png\", false))
using (var result = new Bitmap(source.Width, source.Height))
{
    // Build a colour map of old to new colour
    ColorMap[] colorMap = BuildArrayOfOldAndNewColours();

    // Build image attributes with the map
    var attr = new ImageAttributes();
    attr.SetRemapTable(colorMap);

    // Draw a rectangle the same size as the image
    var rect = new Rectangle(0, 0, source.Width, source.Height);

    // Draw the old image into the new one with one colour mapped to the other
    var g = Graphics.FromImage(result);
    g.DrawImage(source, rect, 0, 0, rect.Width, rect.Height, GraphicsUnit.Pixel, attr);

    result.Save(\"new colour image.png\");
}

这对于简单的图标来说效果很好，但是您可能需要一张复杂的地图才能处理任何照片质量。

要回复问题请先登录或注册

更改图像颜色

4 个回复

发起人

gdi+

gdi

c#

问题状态

更改图像颜色

与内容相关的链接

4 个回复

发起人

gdi+

gdi

c#

问题状态