Resize images and save thumbnails

AlbertoPastore

Hello.
I've tried to google around for a c# sample that could explain how to resize image files to thumbnails (thus keeping aspect ratio).
Howvere I ran into objective-c-only code snippets which are not clear to me.

Is there any sample code that does the trick? All I found is relevant to android only, no ios....

Thanks.
Alberto.

ChrisHonselaar

Here you go, methods for resizing and cropping

// resize the image to be contained within a maximum width and height, keeping aspect ratio
public UIImage MaxResizeImage(UIImage sourceImage, float maxWidth, float maxHeight)
{
    var sourceSize = sourceImage.Size;
    var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
    if (maxResizeFactor > 1) return sourceImage;
    var width = maxResizeFactor * sourceSize.Width;
    var height = maxResizeFactor * sourceSize.Height;
    UIGraphics.BeginImageContext(new SizeF(width, height));
    sourceImage.Draw(new RectangleF(0, 0, width, height));
    var resultImage = UIGraphics.GetImageFromCurrentImageContext();
    UIGraphics.EndImageContext();
    return resultImage;
}

// resize the image (without trying to maintain aspect ratio)
public UIImage ResizeImage(UIImage sourceImage, float width, float height)
{
    UIGraphics.BeginImageContext(new SizeF(width, height));
    sourceImage.Draw(new RectangleF(0, 0, width, height));
    var resultImage = UIGraphics.GetImageFromCurrentImageContext();
    UIGraphics.EndImageContext();
    return resultImage;
}

// crop the image, without resizing
private UIImage CropImage(UIImage sourceImage, int crop_x, int crop_y, int width, int height)
{
    var imgSize = sourceImage.Size;
    UIGraphics.BeginImageContext(new SizeF(width, height));
    var context = UIGraphics.GetCurrentContext();
    var clippedRect = new RectangleF(0, 0, width, height);
    context.ClipToRect(clippedRect);
    var drawRect = new RectangleF(-crop_x, -crop_y, imgSize.Width, imgSize.Height);
    sourceImage.Draw(drawRect);
    var modifiedImage = UIGraphics.GetImageFromCurrentImageContext();
    UIGraphics.EndImageContext();
    return modifiedImage;
}

ChrisHonselaar

You might also like to try ProtoPad, it allows you to very quickly experiment with stuff like this.

AlbertoPastore

Great! I've been trying both your code suggestion and ProtoPad, I'm pretty new to mobile developement, but coming from windows .net experience.
Xamarin Rocks! I've been making very quick progress in just 3 days, now I'm at least able to compile my first universal app (with something more than just a hello world label!!!

I'm doing my own photo gallery... it works like a charm with collections views.

Thank you

JasonHartley

I believe Math.Min should have been used, not Math.Max. If you want both the width and the height to not exceed the max values, you must choose the least of the two to use as the resize factor.

var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);

Otherwise, great work. Much appreciated.

AlbertoPastore

Thanks Jason, I've already figured it out myself, and forgot the post a comment, "min" makes much more sense!

AlbertoPastore

After experimenting on different pieces of code, I decide to move from UI to CG.
It looks like the UIGraphics.BeginImageContext() ... UIGraphics.EndImageContext() is suffering from some sort of memory leakage.

I'm using the resizing function to generate several thumbnails, and my version of the function has been carefully modified to properly dispose any disposable object via using().

However the app crashes regularly after about 400 images being resized, having only 30 Mb ram left on the iPad and after several DidReceiveMemoryWarning() events (even tried to GC.collect() every 10-20 thumbnails with no effect at all).

I think something's wrong with UIkit implementation....

Also found a similar issue in this post on stack overflow:

stackoverflow.com/questions/8396698/monotouch-memory-leak-when-drawing-pdf-on-a-custom-graphics-context

JoaquimVarandas

Thanks for your methods for resizing and cropping.

For Retina Display contexts the images produced with your methods loses resolution, you must use:

UIGraphics.BeginImageContextWithOptions(new SizeF(width, height), false, 2.0f);

instead of:

UIGraphics.BeginImageContext(new SizeF(width, height));

Great work.

XamTwo

Thanks SO MUCH for the methods! Extremely helpful!

Allister

there's also http://forums.xamarin.com/discussion/14269/objective-c-image-crop-function for a shorter crop function.

syedaliaziz

@ChrisHonselaar Thanks for the functions - quite helpful.

Can you also point to Android and WP specific implementation of these resizing and cropping methods?

JalesC

Update this code

public static class ExtensionMethods
{
    // resize the image to be contained within a maximum width and height, keeping aspect ratio
    public static UIImage MaxResizeImage(this UIImage sourceImage, float maxWidth, float maxHeight)
    {
        var sourceSize = sourceImage.Size;
        var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
        if (maxResizeFactor > 1) return sourceImage;
        var width = maxResizeFactor * sourceSize.Width;
        var height = maxResizeFactor * sourceSize.Height;
        UIGraphics.BeginImageContext(new CGSize(width, height));
        sourceImage.Draw(new CGRect(0, 0, width, height));
        var resultImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return resultImage;
    }

    // resize the image (without trying to maintain aspect ratio)
    public static UIImage ResizeImage(this UIImage sourceImage, float width, float height)
    {
        UIGraphics.BeginImageContext(new SizeF(width, height));
        sourceImage.Draw(new RectangleF(0, 0, width, height));
        var resultImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return resultImage;
    }

    // crop the image, without resizing
    public static UIImage CropImage(this UIImage sourceImage, int crop_x, int crop_y, int width, int height)
    {
        var imgSize = sourceImage.Size;
        UIGraphics.BeginImageContext(new SizeF(width, height));
        var context = UIGraphics.GetCurrentContext();
        var clippedRect = new RectangleF(0, 0, width, height);
        context.ClipToRect(clippedRect);
        var drawRect = new CGRect(-crop_x, -crop_y, imgSize.Width, imgSize.Height);
        sourceImage.Draw(drawRect);
        var modifiedImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return modifiedImage;
    }
}

Lainio47

@JalesC said:
Update this code

public static class ExtensionMethods
{
// resize the image to be contained within a maximum width and height, keeping aspect ratio
public static UIImage MaxResizeImage(this UIImage sourceImage, float maxWidth, float maxHeight)
{
var sourceSize = sourceImage.Size;
var maxResizeFactor = Math.Max(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
if (maxResizeFactor > 1) return sourceImage;
var width = maxResizeFactor * sourceSize.Width;
var height = maxResizeFactor * sourceSize.Height;
UIGraphics.BeginImageContext(new CGSize(width, height));
sourceImage.Draw(new CGRect(0, 0, width, height));
var resultImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return resultImage;
}

  // resize the image (without trying to maintain aspect ratio)
  public static UIImage ResizeImage(this UIImage sourceImage, float width, float height)
  {
      UIGraphics.BeginImageContext(new SizeF(width, height));
      sourceImage.Draw(new RectangleF(0, 0, width, height));
      var resultImage = UIGraphics.GetImageFromCurrentImageContext();
      UIGraphics.EndImageContext();
      return resultImage;
  }

  // crop the image, without resizing
  public static UIImage CropImage(this UIImage sourceImage, int crop_x, int crop_y, int width, int height)
  {
      var imgSize = sourceImage.Size;
      UIGraphics.BeginImageContext(new SizeF(width, height));
      var context = UIGraphics.GetCurrentContext();
      var clippedRect = new RectangleF(0, 0, width, height);
      context.ClipToRect(clippedRect);
      var drawRect = new CGRect(-crop_x, -crop_y, imgSize.Width, imgSize.Height);
      sourceImage.Draw(drawRect);
      var modifiedImage = UIGraphics.GetImageFromCurrentImageContext();
      UIGraphics.EndImageContext();
      return modifiedImage;
  }

}

Wow awesome code!!

Nininea

Hey,

I need to save image thumbnail >> here Is simple code for c# , but it isn't valid for xamarin.mac :

Image image = Image.FromFile(fileName);
    Image thumb = image.GetThumbnailImage(120, 120, ()=>false, IntPtr.Zero);
    thumb.Save(Path.ChangeExtension(fileName, "thumb"));

Any solution?