iPhone App Development – Masking Images

Ever had an iPhone or iPad app that allowed the user to select a photo to display from their library and find that most images don’t work well with your design? The photos often look as if they were merely pasted on top of the screen rather than integrated as part of the layout.

One way to improve the design of your application is to dynamically add an alpha mask to the user’s image. It can be an irregularly shaped and hard-edged crop, adding style to the image, or a soft fade, blending it with the surrounding graphics.

Masking Image for iPhone Development

Images used as masks do not have an alpha layer. White represents the hidden areas, black what is revealed, and shades of grey providing partial transparency (more opaque as it moves towards black).

Here is some example code showing how to mask any image:

CGImageRef addAlphaChannel(CGImageRef image) {
CGImageRef alphaImage = NULL;
size_t width = CGImageGetWidth(image);
size_t height = CGImageGetHeight(image);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGContextRef offscreenContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedFirst);
if (offscreenContext != NULL) {
CGContextDrawImage(offscreenContext, CGRectMake(0, 0, width, height), image);
alphaImage = CGBitmapContextCreateImage(offscreenContext);

return alphaImage;

- (UIImage*)maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);

CGImageRef sourceImage = [image CGImage];
CGImageRef imageWithAlpha = sourceImage;

// add an alpha channel for images that don't already have one
if ((CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone)
|| (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNoneSkipFirst)
|| (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNoneSkipLast)) {
imageWithAlpha = addAlphaChannel(sourceImage);

CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);

// release the image if alpha was added
if (sourceImage != imageWithAlpha) {

UIImage* maskedImage = [UIImage imageWithCGImage:masked];

return maskedImage;

To use this code simply call the method as follows (obviously replacing objects and images with your own):

imageView.image = [self maskImage:[UIImage imageNamed:@"image.png"] withMask:[UIImage imageNamed:@"mask.png"]];

As mentioned previously this technique is especially useful for user provided images, where unmodified photos can be altered to match the style of your app.

Posted in iOS, iPhone, Mobile Development, Objective-C
  • Achalme8

    What is that code on line 27?

  • Achalme8

    Do I have to import any frame work to get this to work?

  • Jeff

    You should attribute the original source of maskImage:withMask: … the following web site and those who posted corrections/improvements in the comments.


  • What is:

    CGImageRef sourceImage =

    • Arthur,

      There I’m setting what image I want to use to be masked. I removed the source simply so you could create and make your own source image.