Image cropping losing quality MVC3 .Net C# Application

Question

I'm having trouble cropping an image in an MVC3 C# application. I am cropping the image but its losing quality when rendered back in a view. The image to be cropped is loaded from a database and is created from a ByteArray like so...

public static Image ByteArrayToImage(byte[] byteArrayIn)
{
   MemoryStream ms = new MemoryStream(byteArrayIn);
   Image returnImage = Image.FromStream(ms);
   return returnImage;
}

When this image is rendered on a view it looks fine and is off the expected quality. I am then selecting a region to crop and using the below method to do the crop...

public Image CropImage(System.Drawing.Image Image, int Height, int Width, int StartAtX, int StartAtY)
        {
            Image outimage;
            MemoryStream mm = null;
            try
            {
                //check the image height against our desired image height
                if (Image.Height < Height)
                {
                    Height = Image.Height;
                }

                if (Image.Width < Width)
                {
                    Width = Image.Width;
                }

                //create a bitmap window for cropping
                Bitmap bmPhoto = new Bitmap(Width, Height, PixelFormat.Format24bppRgb);
                bmPhoto.SetResolution(Image.VerticalResolution,Image.HorizontalResolution);

                //create a new graphics object from our image and set properties
                Graphics grPhoto = Graphics.FromImage(bmPhoto);
                grPhoto.SmoothingMode = SmoothingMode.AntiAlias;
                grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;
                grPhoto.PixelOffsetMode = PixelOffsetMode.HighQuality;

                //now do the crop
                grPhoto.DrawImage(Image, new Rectangle(0, 0, Width, Height), StartAtX, StartAtY, Width, Height, GraphicsUnit.Pixel);

                // Save out to memory and get an image from it to send back out the method.
                mm = new MemoryStream();
                bmPhoto.Save(mm, System.Drawing.Imaging.ImageFormat.Jpeg);
                Image.Dispose();
                bmPhoto.Dispose();
                grPhoto.Dispose();
                outimage = Image.FromStream(mm);

                return outimage;
            }
            catch (Exception ex)
            {
                throw new Exception("Error cropping image, the error was: " + ex.Message);
            }
        }

This cropped image is then converted back to a ByteArray and can be saved into a database like so...

public static byte[] ImageToByteArray(System.Drawing.Image imageIn)
{
    MemoryStream ms = new MemoryStream();
    imageIn.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
    return ms.ToArray();
}

When this image is later rendered on the view its quality is a lot worse than the original image. It looks quite pixilated. The original image in this case is .jpg but could be any format.

This is an image of the image after it has been loaded from the database and being cropped...

This image is the result of the crop. As you can see its not good.

I have seen some other posts on the topic but they haven't helped. Can anyone suggest a solution?

Thank you

Answer 1

This is a great blog that sums it all up. I have it working in my application now. http://blog.tallan.com/2011/02/04/using-mvc3-razor-helpers-and-jcrop-to-upload-and-crop-images/

Answer 2

Gunnar Peipman has a blog post about the quality called Resizing images without loss of quality . Gunnar says some trick about what is going wrong;

If the Image contains an embedded thumbnail image, this method retrieves the embedded thumbnail and scales it to the requested size. If the Image does not contain an embedded thumbnail image, this method creates a thumbnail image by scaling the main image.

The GetThumbnailImage method works well when the requested thumbnail image has a size of about 120 x 120 pixels. If you request a large thumbnail image (for example, 300 x 300) from an Image that has an embedded thumbnail, there could be a noticeable loss of quality in the thumbnail image. It might be better to scale the main image (instead of scaling the embedded thumbnail) by calling the DrawImage method.

And razor syntax is amicable with JCrop and there is a cool blog post about how you can use it.