{"id":2464,"date":"2007-03-29T03:34:00","date_gmt":"2007-03-29T03:34:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/grayscaling-transparent-gifs-and-pngs\/"},"modified":"2016-07-28T10:49:03","modified_gmt":"2016-07-28T10:49:03","slug":"grayscaling-transparent-gifs-and-pngs","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/blogs\/grayscaling-transparent-gifs-and-pngs\/","title":{"rendered":"Grayscaling transparent gifs and pngs"},"content":{"rendered":"

I find that I end up custom painting a lot of the controls in Red Gate products, this is normally due to some gripe from our usability engineers – I was doing this today and wanted to gray scale some of the pngs when I need to show them disabled – This normally means loading up the excellent Paint.NET and grayscaling each one by hand – then I thought we can surely do this through code with GetPixel and SetPixel, my inital 0.33 of each of the color components didnt work that well and the images looked a little odd – a quick google turns up this: http:\/\/www.bobpowell.net\/grayscale.htm<\/a> which tells us to use a mix of 30% red, 59% green and 11% blue. <\/p>\n

Giving us the following function: (From  http:\/\/www.bobpowell.net\/grayscale.htm<\/a>)<\/p>\n

\n

public<\/p>\n

static Bitmap GrayScaleImage(Bitmap source) <\/p>\n

{<\/p>\n

Bitmap bm = new Bitmap(source.Width,source.Height);<\/p>\n

for(int y=0;y<bm.Height;y++)<\/p>\n

{<\/p>\n

for(int x=0;x<bm.Width;x++)<\/p>\n

{<\/p>\n

Color c=source.GetPixel(x,y);<\/p>\n

int luma = (int)(c.R*0.3 + c.G*0.59+ c.B*0.11);<\/p>\n

bm.SetPixel(x,y,Color.FromArgb(luma,luma,luma));<\/p>\n

}<\/p>\n

}<\/p>\n

return bm;<\/p>\n

}<\/p>\n<\/div>\n

However with our alpha transparency png’s this really doesnt work that well as you end up with little black borders, a quick tweak fixes this:<\/p>\n<\/p>\n

public static Bitmap GrayScaleImagePreserveTransparency(Bitmap source) <\/p>\n

{<\/p>\n<\/p>\n

Bitmap bm = new Bitmap(source.Width,source.Height); <\/p>\n

for(int y=0;y<bm.Height;y++) <\/p>\n

{<\/p>\n<\/p>\n

for(int x=0;x<bm.Width;x++) <\/p>\n

{<\/p>\n<\/p>\n

Color c=source.GetPixel(x,y); <\/p>\n

int luma = (int)(c.R*0.3 + c.G*0.59+ c.B*0.11); <\/p>\n

bm.SetPixel(x,y,<\/p>\n

Color.FromArgb(c.A, luma,luma,luma)); <\/p>\n

}<\/p>\n

}<\/p>\n<\/p>\n

return bm; <\/p>\n

}<\/p>\n","protected":false},"excerpt":{"rendered":"

I find that I end up custom painting a lot of the controls in Red Gate products, this is normally due to some gripe from our usability engineers – I was doing this today and wanted to gray scale some of the pngs when I need to show them disabled – This normally means loading up……<\/p>\n","protected":false},"author":94441,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[],"class_list":["post-2464","post","type-post","status-publish","format-standard","hentry","category-blogs"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/94441"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=2464"}],"version-history":[{"count":2,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2464\/revisions"}],"predecessor-version":[{"id":41499,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/2464\/revisions\/41499"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=2464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=2464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=2464"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=2464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}