• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1265
  • Last Modified:

Changing a specific color in an Image in C#.Net


I'm working on an Asp.Net MVC project, and one of my requirements is to dynamically change the color of the icons on the page.  An example icon is shown here:
 Sample Calendar Image
I have been researching this the last few days, and feel that I am pretty close, however I have little graphic programming experience and need some help figuring out where I'm going wrong.  Here is currently what I'm working with:

I have images on the page that look like this:
<img src="/Organization/GetIcon/calendar" />

And then I have a controller Action Result that basically looks like this:
public ActionResult GetIcon(string name)
    //Temporarily disregarding name and just loading up test image:
    Image image = Image.FromFile(Server.MapPath("/Content/images/calendar.gif"));

    Bitmap bmp = new Bitmap(image);

    ColorMap[] map = new ColorMap[1];
    map[0] = new ColorMap();
    map[0].OldColor = Color.FromArgb(46, 177, 53);  //The green in the calendar image
    map[0].NewColor = Color.FromArgb(255, 0, 0);    //Red

    ImageAttributes attributes = new ImageAttributes();

    Graphics graphic = Graphics.FromImage(bmp);
    Rectangle rectangle = new Rectangle(0, 0, bmp.Width, bmp.Height);
    graphic.DrawImage(bmp, rectangle, 0, 0, rectangle.Width, rectangle.Height, graphic.PageUnit, attributes);

    Byte[] imageBytes = null;

    //Convert newly colored image to byte array.....

    return File(imageBytes, "image/gif");

Open in new window

So my questions:
 - Is the way I am attempting to change the color a correct approach?
 - How do I get the newly colored image to a byte[] array?
  • 2
1 Solution
What I would recommend is a much simpler solution... create the graphic you need with the part to change color transparent. Then place a background color to the image and it will show through the transparent portions.
P1ST0LPETEAuthor Commented:
Using a transparent image sitting on top of a colored background was my first thought too.  However, it became too much trouble, especially when designing it for multiple browser support and using jquery plugins that were looking to be passed just an image.  In the end it was easier to just change the color of the actual image itself.  Also, I ended up having to use .png image files, because .gif and .jpg were not able to save the true color of the image in a way that was easily changable by code.
P1ST0LPETEAuthor Commented:
Ended up figuring out the solution on my own.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now