Correcting Moire pattern interference when resizing images

The latest version of Instant Church Directory includes enhancements to the image cropping and resizing engine.  In particular, the previous version exhibited a Moire pattern (or zebra pattern) in certain photos when we were resizing or scaling the images.  

A Moire pattern in images is an interference pattern that creates artifacts in the image due to poor sampling (wikipedia: http://en.wikipedia.org/wiki/Moir%C3%A9_pattern).

For instance the picture on the left is the original photo of a person and their shirt.  The one on the right is the one from within Instant Church Directory (version 1.0) that exhibited the Moire pattern (or the zebra pattern).

image image

To fix this we needed to make sure to set the InterpolationMode to High Quality when manipulating the image using the System.Drawing.Graphics object.  There are several values you can set for the InterpolationMode with HighQualityBicubic being the best quality.

Graphics g = Graphics.FromImage(bmp2);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.DrawImage(OrignalImage, 0, 0, bmp2.Width, bmp2.Height);

I want to give a reference to this Code Project article - Image Resizing - outperform GDI+ by Libor Tinka that pointed me in the right direction to solve this problem.

No Comments