US Toll-Free - +1 866 941 5117

feature image-1

Implementing Image Masking in iOS

feature image-1

Image masking is a great feature, when you need to draw images in dynamic shapes. It creates an attractive and appealing UI to capture the interests of users. In general, image masking can be defined as cutting an image out of it’s stencil.

This is what the Apple Documentation has to say about image masks

An image mask is a bitmap that specifies an area to paint, but not the color. In effect, an image mask acts as a stencil to specify where to place color on the page.

In this blog we are going to see the implementation of image masking in iOS (Swift and Objective-C).

To implement it you will need a set of resources, that you can get from this dropbox link – .


Create an Objective-C project. Go to the storyboard of the project and on the ViewController, drag and drop a UIImageView. Create an IBOutlet for that imageView in ViewController.h file.

Now add the resources that you got from the dropbox link to your project.

After that add the following function to your ViewController.m file.

- (UIImage*) maskImage:(UIImage *) image withMask:(UIImage *) mask
    CGImageRef imageReference = image.CGImage;
    CGImageRef maskReference = mask.CGImage;
    CGImageRef imageMask = CGImageMaskCreate(CGImageGetWidth(maskReference),
                                             NULL, // Decode is null
                                             YES // Should interpolate
    CGImageRef maskedReference = CGImageCreateWithMask(imageReference, imageMask);
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedReference];
    return maskedImage;

Now, go to function -(void)viewDidLoad of the view controller and add the following lines for creating a masked image

UIImage *image=[UIImage imageNamed:@"image2.png"];
UIImage *mask=[UIImage imageNamed:@"mask6.png"];
UIImage *newimage=[self maskImage:image withMask:mask];

After that run your project. Your simulator should show an image similar to this.

Simulator Screen Shot 30-Sep-2015 1.13.35 pm

It’s just as simple as you thought.


For Swift, create a Swift project. All the preliminary steps remains the same as the ones mentioned for Objective-C (except for the coding part). After adding the resources in your project, add the following method in ViewController.swift file

func maskImage(image:UIImage, mask:(UIImage))->UIImage{
     let imageReference = image.CGImage
     let maskReference = mask.CGImage
     let imageMask = CGImageMaskCreate(CGImageGetWidth(maskReference),
     CGImageGetDataProvider(maskReference), nil, true)
     let maskedReference = CGImageCreateWithMask(imageReference, imageMask)
     let maskedImage = UIImage(CGImage:maskedReference!)
     return maskedImage

And in function override func viewDidLoad() add the following lines

let image = UIImage(named: "image2.png")
let maskingImage = UIImage(named: "mask6.png")
imageView.image = maskImage(image!, mask: maskingImage!)

Now run your project and you can see the same output as shown in the above simulated image.

You can find GitHub repository sample project of the above tutorial in Swift and Objective-C.

Hope the blog was easy and simple to follow. In case of issues and suggestions, feel free to reach me through your comments.

Manish Kumar

Manish Kumar is an iOS developer at Kolkata, who enjoys building innovative applications. Besides he also loves playing football and listening to songs. He loves challenges and sharing his work in open source community. Lots of iOS objective C development work is going on in Innofied. You can reach us at

  • Saulo Dourado

    Hello Manish,

    How could I animate(scaling, moving,…) the image that is being mask?



    • Manish Kumar

      Do you want to animate the image only or its shadow also? Is it real time animation or pre defined? Please explain.

      • Saulo Dourado

        The image only, the mask would remain fixed. For example, something that looks like a binocular view, where you see two circles and a landscape image is moving left to right behind it.

  • Ashish Thummar

    Note Working !! Its returning same image which is passed masking is not working.

    • Manish Kumar

      Is it the swift version or ObjC version? I checkd here, both the swift and ObjC versions are working perfectly fine.

      • Ashish Thummar

        Okay, Now its working fine there was a issue with the mask image. Thanks

  • Waqar Khalid

    How can we use the customized mask to the image.Like extract only flower part of this image or in general the part of the image based on user’s selection

    • Manish Kumar

      First you will have to create a CAShapeLayer of the portion to be masked through UIBezierPath. Then assign this layer to the .mask property of the layer upon which masking has to take place.

      • Waqar Khalid

        Can you please illustrate as I am struggling through this for days.I want to crop the custom part of the image based on user’s gesture.It will be a great help of you.