[iPhoneiOS dev:tips]; » Graphics

How to Crop an Image

John Muchow — Fri, 04 Jun 2010 02:44:29 +0000

This post shows an example of one way to crop an image. Let’s begin by looking at a screenshot of the original and cropped image on the iPhone simulator:

As you can see, I am cropping a rectangle from the middle of the image on the top left. The code below shows how to accomplished this:

// Create the image from a png file
UIImage *image = [UIImage imageNamed:@"prgBinary.jpg"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
 
// Get size of current image
CGSize size = [image size];
 
// Frame location in view to show original image
[imageView setFrame:CGRectMake(0, 0, size.width, size.height)];
[[self view] addSubview:imageView];
[imageView release];	
 
// Create rectangle that represents a cropped image  
// from the middle of the existing image
CGRect rect = CGRectMake(size.width / 4, size.height / 4 , 
    (size.width / 2), (size.height / 2));
 
// Create bitmap image from original image data,
// using rectangle to specify desired crop area
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *img = [UIImage imageWithCGImage:imageRef]; 
CGImageRelease(imageRef);
 
// Create and show the new image from bitmap data
imageView = [[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(0, 200, (size.width / 2), (size.height / 2))];
[[self view] addSubview:imageView];
[imageView release];

All the heavy lifting is done by the method CGImageCreateWithImageInRect, which creates a new bitmap image using existing image data and a rectangle that is a subregion of that same image. Once cropped, I create a new UIImageView and add it as a subview of the current view.

Convert an Image (UIImage) to Grayscale

John Muchow — Thu, 13 May 2010 11:07:44 +0000

A trick you won’t need often, yet when the day arrives, you’ll have this up your sleeve – a quick method to convert a UIImage object to grayscale.

- (UIImage *)convertImageToGrayScale:(UIImage *)image
{
  // Create image rectangle with current image width/height
  CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
 
  // Grayscale color space
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
 
  // Create bitmap content with current image size and grayscale colorspace
  CGContextRef context = CGBitmapContextCreate(nil, image.size.width, image.size.height, 8, 0, colorSpace, kCGImageAlphaNone);
 
  // Draw image into current context, with specified rectangle
  // using previously defined context (with grayscale colorspace)
  CGContextDrawImage(context, imageRect, [image CGImage]);
 
  // Create bitmap image info from pixel data in current context
  CGImageRef imageRef = CGBitmapContextCreateImage(context);
 
  // Create a new UIImage object  
  UIImage *newImage = [UIImage imageWithCGImage:imageRef];
 
  // Release colorspace, context and bitmap information
  CGColorSpaceRelease(colorSpace);
  CGContextRelease(context);
  CFRelease(imageRef);
 
  // Return the new grayscale image
  return newImage;
}

Simple enough – here is an example of a converted image:

Resize/Scale of an Image – Take 2 – Coding a Thread Safe Approach

John Muchow — Mon, 25 Jan 2010 14:37:07 +0000

In the first post on image resizing, How to Resize/Scale an Image using an Objective-C Category, I wrote barebones approach to resizing an image. This works well for simple cases, however this approach is not thread safe as it uses the global current context.

I attended a recent Apple Tech Talk and one of the more interesting discussions was on how to create code to dynamically resize images, using an approach that is thread safe. An experienced developer at the event was willing to share an excellent code example that I’ll walk through in this post. The code is a fair amount more complex than the first version I wrote, however, with the complexity comes flexibility.

Building the User Interface

The project to demonstrate thread-safe image resizing is quite simple, essentially a table and a slider, with the later controlling the size of the images in the table. The image below should give you and idea of how things work:

It all starts by building a UITableView and setting the imageView property to one of the images in the application bundle. The code to build (or reload) the table looks as follows:

-(UITableViewCell *) tableView:(UITableView *)tableView 
   cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = 
	(UITableViewCell*) [tableView dequeueReusableCellWithIdentifier:kMyCellID];
  ...
 
  cell.imageView.image = [self requestImageForIndex:row];
 
  return cell;
}

The relevant line of code is 8, notice the call to requestImageForIndex, the code for this method is shown below. There is a fair amount going on here, first an ImageStateObject is created, this keeps track of the path of the image, a flag indicating if the image has been loaded and a flag indicating if a (resize) operation is in progress. There is also code for managing a queue of operations -to keep focuses on the task at hand, skip down to LINE 20, where we call UImageFromPathScaledToSize passing in the image state object and the preferred size.

-(UIImage*) requestImageForIndex:(NSUInteger)index
{
  ImageStateObject *iso	= [self imageObjectForIndex:index];
  CGSize  theSz = [self preferredImageSize];
 
  if( mUseOperations )
  {
    if( iso.hasImage == NO && iso.queuedOp == NO )	// if we dont have an image and there is no operation pending
    {	
      // Queue up an operation to do the work!
      MyLoadScaleOperation *op = [[MyLoadScaleOperation alloc] initWithPath:iso.path index:index targetSize:theSz];
      op.resultsDelegate = self;		// set the delegate
      [mQueue addOperation:op];
      [op release];
 
      iso.queuedOp = YES;
    }		
    return mPlaceHolderImage;		// just return our placeholder
  }	
  return UImageFromPathScaledToSize( iso.path, theSz );
}

Note that when calling the method on line 20, notice the path to the image is passed in as the first parameter.

ImageStateobject

For completeness, here is the definition of the image state object:

@interface ImageStateObject : NSObject
{
  NSString *path;
  BOOL  hasImage;
  BOOL  queuedOp;
}

The code for working with the queued operations (queuedOp) we will look into in a future post.

UImageFromPathScaledToSize

Given a path to an image and a specified size, create a UIImage object and get the scale value based on the current image size and the size to scale to, and finish by creating a new UIImage object from the original image, scaled as requested.

UIImage *UImageFromPathScaledToSize(NSString* path, CGSize toSize)
{
  UIImage *scaledImg = nil;
  UIImage *img = [[UIImage alloc] initWithContentsOfFile:path];	// get the image
 
  if( img )
  {
    float scale = GetScaleForProportionalResize( img.size, toSize, false, false );
 
    CGImageRef cgImage	= CreateCGImageFromUIImageScaled( img, scale );
 
    [img release];
 
    if( cgImage )
    {
      scaledImg = [UIImage imageWithCGImage:cgImage];	// autoreleased
      CGImageRelease( cgImage );
    }
  }
  return scaledImg;	// autoreleased
}

Get Scale Percentage and Create New Image Reference

Below is the code to determine the scale value as a percentage. For example, if the incoming image size (theSize) is 266 x 401 and the destination size (intoSize) is 225 x 225, the returned scale value is .561 (225/401). That is, we want to scale the image to 56% of its current size.

float GetScaleForProportionalResize( CGSize theSize, CGSize intoSize, bool onlyScaleDown, bool maximize )
{
  float sx = theSize.width;
  float sy = theSize.height;
  float dx = intoSize.width;
  float dy = intoSize.height;
  float scale = 1;
 
  if( sx != 0 && sy != 0 )
  {
    dx = dx / sx;
    dy	 = dy / sy;
 
    // if maximize is true, take LARGER of the scales, else smaller
    if( maximize )
      scale = (dx > dy)	? dx : dy;
    else			
      scale = (dx < dy)	? dx : dy;
 
    if( scale > 1 && onlyScaleDown )	// reset scale
      scale = 1;
  }
  else
  {
    scale = 0;
  }
  return scale;
}

The last step is to create a CGImageRef which will hold bitmap information for the new, scaled image. This reference will then be used to create our final scaled UIImage object.

CGContextRef CreateCGBitmapContextForWidthAndHeight( unsigned int width, unsigned int height, 
    CGColorSpaceRef optionalColorSpace, CGBitmapInfo optionalInfo )
{
  CGColorSpaceRef colorSpace = (optionalColorSpace == NULL) ? GetDeviceRGBColorSpace() : optionalColorSpace;
  CGBitmapInfo alphaInfo	= ( (int32_t)optionalInfo < 0 ) ? kDefaultCGBitmapInfo : optionalInfo;
  return CGBitmapContextCreate( NULL, width, height, 8, 0, colorSpace, alphaInfo );
}
 
CGImageRef CreateCGImageFromUIImageScaled( UIImage* image, float scaleFactor )
{
  CGImageRef newImage = NULL;
  CGContextRef bmContext = NULL;
  BOOL  mustTransform = YES;
  CGAffineTransform  transform = CGAffineTransformIdentity;
  UIImageOrientation orientation = image.imageOrientation;
 
  CGImageRef srcCGImage = CGImageRetain( image.CGImage );
 
  size_t width = CGImageGetWidth(srcCGImage) * scaleFactor;
  size_t height = CGImageGetHeight(srcCGImage) * scaleFactor;
 
  // These Orientations are rotated 0 or 180 degrees, so they retain the width/height of the image
  if ( (orientation == UIImageOrientationUp) || (orientation == UIImageOrientationDown) || (orientation == UIImageOrientationUpMirrored) || (orientation == UIImageOrientationDownMirrored)  )
  {	
    bmContext	= CreateCGBitmapContextForWidthAndHeight( width, height, NULL, kDefaultCGBitmapInfo );
  }
  else	// The other Orientations are rotated ±90 degrees, so they swap width & height.
  {	
    bmContext	= CreateCGBitmapContextForWidthAndHeight( height, width, NULL, kDefaultCGBitmapInfo );
  }
 
  CGContextSetBlendMode( bmContext, kCGBlendModeCopy );	// we just want to copy the data
 
  switch(orientation)
  {
    case UIImageOrientationDown:		// 0th row is at the bottom, and 0th column is on the right - Rotate 180 degrees
    transform = CGAffineTransformMake(-1.0, 0.0, 0.0, -1.0, width, height);
    break;
 
    case UIImageOrientationLeft:		// 0th row is on the left, and 0th column is the bottom - Rotate -90 degrees
    transform = CGAffineTransformMake(0.0, 1.0, -1.0, 0.0, height, 0.0);
    break;
 
    case UIImageOrientationRight:		// 0th row is on the right, and 0th column is the top - Rotate 90 degrees
    transform = CGAffineTransformMake(0.0, -1.0, 1.0, 0.0, 0.0, width);
    break;
 
    case UIImageOrientationUpMirrored:	// 0th row is at the top, and 0th column is on the right - Flip Horizontal
    transform = CGAffineTransformMake(-1.0, 0.0, 0.0, 1.0, width, 0.0);
    break;
 
    case UIImageOrientationDownMirrored:	// 0th row is at the bottom, and 0th column is on the left - Flip Vertical
    transform = CGAffineTransformMake(1.0, 0.0, 0, -1.0, 0.0, height);
    break;
 
    case UIImageOrientationLeftMirrored:	// 0th row is on the left, and 0th column is the top - Rotate -90 degrees and Flip Vertical
    transform = CGAffineTransformMake(0.0, -1.0, -1.0, 0.0, height, width);
    break;
 
    case UIImageOrientationRightMirrored:	// 0th row is on the right, and 0th column is the bottom - Rotate 90 degrees and Flip Vertical
    transform = CGAffineTransformMake(0.0, 1.0, 1.0, 0.0, 0.0, 0.0);
    break;
 
    default:
    mustTransform = NO;
    break;
  }
 
  if ( mustTransform )	
    CGContextConcatCTM( bmContext, transform );
 
  CGContextDrawImage( bmContext, CGRectMake(0.0, 0.0, width, height), srcCGImage );
  CGImageRelease( srcCGImage );
  newImage = CGBitmapContextCreateImage( bmContext );
  CFRelease( bmContext );
 
  return newImage;
}

Project Source Code

You can download the entire project source code here. You’ll find the image processing code shown above is in the source file ImageHelpers.m.

There are many other worthwhile code snippets to look at in this project, including code to create and display gradients (for the table background) as well as working with NSOperation and NSOperationQueue to place resize requests into a queue for processing.

Gotcha: Case Sensitive PNG Filename

John Muchow — Thu, 10 Dec 2009 08:07:07 +0000

Here’s one that will trip you up if you aren’t careful…look at this code:

timerButton = [[UIButton alloc] initWithFrame:CGRectMake(104, 410, 50, 50)];    
 
// Notice the filename "timer.png"
[timerButton setBackgroundImage:[UIImage imageNamed:@"timer.png"] 
    forState:UIControlStateNormal];
 
[timerButton addTarget:self action:@selector(buttonPressed:) 
   forControlEvents: UIControlEventTouchUpInside];
 
[self.view addSubview:timerButton];

Simple enough, create a button, use the image timer.png for the normal state, and all is well…if you run this code in the simulator. Problem is, if the actual filename of the image is Timer.png the png file will not appear when running this code on device.

If you haven’t run into this while developing an iPhone app, you can’t fully appreciate how time consuming it can be to track this down.

Note: I ran into this while working with Xcode 3.2.1 and building for iPhone OS 3.1.2

Resize/Scale of an Image – Take 1 – Using an Objective-C Category

John Muchow — Wed, 11 Nov 2009 08:52:18 +0000

Editor’s Note: Part 2 of this post Resize/Scale of an Image – Take 2 – Thread Safe Approach takes this idea to the next level, showing how to dynamically resize images using thread safe code.

Given how common it is to scale an image within an application, it’s surprising (at least to me) that such a method is not included in the UIImage class. Let’s go ahead and take care of this omission by adding a simple method which will provide a means to scale an image.

We’ll use an Objective-C category to add a method to the UIImage class. I covered categories in this post. No question, categories are your friend, as they are very handy in cases such as this, where you would like to add functionality to an existing class.

Defining the UIImage Scale Category

To add a method to the UIImage class, there are two steps we need to take care in the interface defintion. First, create an interface definition for UIImage and add a category name inside a set of parenthesis after the interface declaration. Second, create the method declaration. An example follows:

//  UIImage+Scale.h
 
@interface UIImage (scale)
 
-(UIImage*)scaleToSize:(CGSize)size;
 
@end

Implementation UIImage Scale Category

With the interface in place, let’s write the code for the method that will be added to the UIImage class.

//  UIImage+Scale.h
 
#import "UIImage+Scale.h"
 
@implementation UIImage (scale)
 
-(UIImage*)scaleToSize:(CGSize)size
{
  // Create a bitmap graphics context
  // This will also set it as the current context
  UIGraphicsBeginImageContext(size);
 
  // Draw the scaled image in the current context
  [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
 
  // Create a new image from current context
  UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
 
  // Pop the current context from the stack
  UIGraphicsEndImageContext();
 
  // Return our new scaled image
  return scaledImage;
}
 
@end

Using the UIImage Scale Method

Calling the new scale method we added to UIImage is as simple as this:

#import "UIImage+Scale.h"
 
...
 
// Create an image
UIImage *image = [UIImage imageNamed:@"myImage.png"];
 
// Scale the image
UIImage *scaledImage = [image scaleToSize:CGSizeMake(25.0f, 35.0f)];

Animated Gif – Animated Images – iPhone Style

John Muchow — Thu, 16 Jul 2009 15:01:24 +0000

Ah, the animated gif, a throwback to the early days of web development and simple animation. In this post I’ll show you how to use a UIImageView to create a similar effect that you get with an animated gif.

Below I’ve inserted the animated gif that I’ll use as a template for the iPhone app we’ll write in this post.

Animated gifs are nothing more than a series of images, encapsulated within one gif file, that are displayed in sequence. Within an animated gif one can specify the duration that each image (aka frame) is displayed, which offers a wide range effects that you can achieve.

Animated Images on the iPhone
To achieve a similar effect in an iPhone app, we create a UIImageView and set the animationImages property to point to an array of images. Not unlike the animated gif, we now have a series of images in which we can control the amount of time to complete one cycle of the images, as well as the repeat count of how many times to cycle through the animation.

To keep the example short, I’ll use only one class, the application delegate. Here is how I’ve defined the delegate class:

@interface animationAppDelegate : NSObject 
{
  UIImageView   *animatedImages;
  NSMutableArray *imageArray;
  UIWindow *window;
}

Not much here, the UIImageView, an array to hold the images and the UIWindow for the output.

The code for the implementation of the app delegate follows:

#import "animationAppDelegate.h"
 
#define IMAGE_COUNT       36
#define IMAGE_WIDTH       240
#define IMAGE_HEIGHT      180
#define STATUS_BAR_HEIGHT 20
#define SCREEN_HEIGHT     460
#define SCREEN_WIDTH      320
 
@implementation animationAppDelegate
 
@synthesize window;
 
- (void)stopAnimation
{
  [animatedImages stopAnimating];
}
 
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
  window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 
  // Array to hold jpg images
  imageArray = [[NSMutableArray alloc] initWithCapacity:IMAGE_COUNT];
 
  // Build array of images, cycling through image names
  for (int i = 0; i < IMAGE_COUNT; i++)
    [imageArray addObject:[UIImage imageNamed:
              [NSString stringWithFormat:@"Frame_%d.jpg", i]]];
 
  // Animated images - centered on screen
   animatedImages = [[UIImageView alloc] 
     initWithFrame:CGRectMake(
        (SCREEN_WIDTH / 2) - (IMAGE_WIDTH / 2), 
        (SCREEN_HEIGHT / 2) - (IMAGE_HEIGHT / 2) + STATUS_BAR_HEIGHT,
        IMAGE_WIDTH, IMAGE_HEIGHT)];
  animatedImages.animationImages = [NSArray arrayWithArray:imageArray];
 
  // One cycle through all the images takes 1 seconds
  animatedImages.animationDuration = 1.0;
 
  // Repeat forever
  animatedImages.animationRepeatCount = 0;
 
  // Add subview and make window visible
  [window addSubview:animatedImages];
  [window makeKeyAndVisible];
 
  // Start it up
  animatedImages.startAnimating;
 
  // Wait 5 seconds, then stop animation
  [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:5];
 
}
 
- (void)dealloc 
{
  [imageArray release];
  [animatedImages release];
  [window release];
  [super dealloc];
}
 
@end

How it Works
On lines 3 – 5 we define the attributes for the images in the animation. There are a total of 36 images, each is 240 x 180 pixels. On line 22 the array is defined which will hold the images and lines 25 – 27 the images are added to the array. You can decipher from the code that the images I am using have file names in the format: Frame_1.jpg, Frame_2.jpg, Frame_3.jpg, etc.

On lines 30 – 34 we allocate an UIImageView object and configure the frame so the image is centered on the device display. Line 35 sets the animationImages property to the array of images created above.

Line 38 sets the duration for one cycle through all the images. We specify the images are to cycle indefinitely by setting the animationRepeatCount to -1 on line 41.

At this point we are pretty much good to go, all we need to do is add the UIImageView object as a subview (line 44) and start the animation (line 48).

Application in the iPhone Simulator
The movie below shows how the application looks when running in the iPhone simulator:

Porting Animated Gif to iPhone
Not unlike I did for the example above, if you have an animated gif that you would like to use within an iPhone app, it’s as simple as extracting/saving each image inside a gif and using a sequential naming convention. I opened the original gif file and manually saved each frame in the image to a jpg file. There are a number of tools that will do the extraction/saving/renaming for you (search for gif extractor).

With all the images saved as separate file, swap the image attributes in the #define section and update the code on line 27 to match the filename you used for saving each file.

Xcode Project Source Code
Download the Animation Xcode project.

Animated gif of Newtons cradle, courtesy: Wikipedia

Creating iPhone Icons

John Muchow — Thu, 18 Sep 2008 07:08:49 +0000

I’ve been poking around for a decent tutorial on how to create icons for the iPhone. Specifically, I am looking for a walk through with either PhotoShop or FireWorks. The icon I have in mind is what will be shown on the home screen of the iPhone as well as on the App Store.

The first tutorial I found that does a nice job of walking through the basics is from KeepTheWebWeird, you can view the tutorial here. A screenshot of the example created is shown below.

You can also view two movies that accompany the tutorial:

If you know of other good tutorials for working with icons, please drop me an email or post a comment below.