Question

I have a blog application that I’m making. To compose a new entry, there is a “Compose Entry” view where the user can select a photo and input text. For the photo, there is a UIImageView placeholder and upon clicking this, a custom ImagePicker comes up where the user can select up to 3 photos.

This is where the problem comes in. I don’t need the full resolution photo from the ALAsset, but at the same time, the thumbnail is too low resolution for me to use.

So what I’m doing at this point is resizing the fullResolution photos to a smaller size. However, this takes some time, especially when resizing up to 3 photos to a smaller size.

Here is a code snipped to show what I’m doing:

    ALAssetRepresentation *rep = [[dict objectForKey:@"assetObject"] defaultRepresentation];

    CGImageRef iref = [rep fullResolutionImage];
    if (iref) 
    {
        CGRect screenBounds = [[UIScreen mainScreen] bounds];

        UIImage *previewImage;
        UIImage *largeImage;

        if([rep orientation] == ALAssetOrientationUp) //landscape image
        {
            largeImage = [[UIImage imageWithCGImage:iref] scaledToWidth:screenBounds.size.width];
            previewImage = [[UIImage imageWithCGImage:iref] scaledToWidth:300];
        }
        else  // portrait image
        {
            previewImage = [[[UIImage imageWithCGImage:iref] scaledToHeight:300] imageRotatedByDegrees:90];
            largeImage = [[[UIImage imageWithCGImage:iref] scaledToHeight:screenBounds.size.height] imageRotatedByDegrees:90];
        }
    }

Here, from the fullresolution image, I am creating two images: a preview image (max 300px on the long end) and a large image (max 960px or 640px on the long end). The preview image is what is shown on the app itself in the “new entry” preview. The large image is what will be used when uploading to the server.

The actual code I’m using to resize, I grabbed somewhere from here:

-(UIImage*)scaledToWidth:(float)i_width
{
    float oldWidth = self.size.width;
    float scaleFactor = i_width / oldWidth;

    float newHeight = self.size.height * scaleFactor;
    float newWidth = oldWidth * scaleFactor;

    UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight));
    [self drawInRect:CGRectMake(0, 0, newWidth, newHeight)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    return newImage;
}

Am I doing things wrong here? As it stands, the ALAsset thumbnail is too low clarity, and at the same time, I dont need the entire full resolution. It’s all working now, but the resizing takes some time. Is this just a necessary consequence?

Thanks!

Answer 1

It is a necessary consequence of resizing your image that it will take some amount of time. How much depends on the device, the resolution of the asset and the format of the asset. But you don’t have any control over that. But you do have control over where the resizing takes place. I suspect that right now you are resizing the image in your main thread, which will cause the UI to grind to a halt while you are doing the resizing. Do enough images, and your app will appear hung for long enough that the user will just go off and do something else (perhaps check out competing apps in the App Store).

What you should be doing is performing the resizing off the main thread. With iOS 4 and later, this has become much simpler because you can use Grand Central Dispatch to do the resizing. You can take your original block of code from above and wrap it in a block like this:

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
  ALAssetRepresentation *rep = [[dict objectForKey:@"assetObject"] defaultRepresentation];

  CGImageRef iref = [rep fullResolutionImage];
  if (iref) 
  {
      CGRect screenBounds = [[UIScreen mainScreen] bounds];

      __block UIImage *previewImage;
      __block UIImage *largeImage;

      if([rep orientation] == ALAssetOrientationUp) //landscape image
      {
          largeImage = [[UIImage imageWithCGImage:iref] scaledToWidth:screenBounds.size.width];
          previewImage = [[UIImage imageWithCGImage:iref] scaledToWidth:300];
      }
      else  // portrait image
      {
          previewImage = [[[UIImage imageWithCGImage:iref] scaledToHeight:300] imageRotatedByDegrees:90];
          largeImage = [[[UIImage imageWithCGImage:iref] scaledToHeight:screenBounds.size.height] imageRotatedByDegrees:90];
      }
      dispatch_async(dispatch_get_main_queue(), ^{
        // do what ever you need to do in the main thread here once your image is resized.
        // this is going to be things like setting the UIImageViews to show your new images
        // or adding new views to your view hierarchy
      });
    }
});

You’ll have to think about things a little differently this way. For example, you’ve now broken up what used to be a single step into multiple steps now. Code that was running after this will end up running before the image resize is complete or before you actually do anything with the images, so you need to make sure that you didn’t have any dependencies on those images or you’ll likely crash.