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.

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

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

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

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.

  • Amr Ahmed Elghadban

    @manishatinnofied:disqus thanks a lot it helps me

    i would like also to submit here the swift 3 version of code so that you may adjust the article to also include it

    func maskImage(image:UIImage, mask:(UIImage))->UIImage{

    let imageReference = image.cgImage
    let maskReference = mask.cgImage

    let imageMask = CGImage(maskWidth: maskReference!.width,
    height: maskReference!.height,
    bitsPerComponent: maskReference!.bitsPerComponent,
    bitsPerPixel: maskReference!.bitsPerPixel,
    bytesPerRow: maskReference!.bytesPerRow,
    provider: maskReference!.dataProvider!, decode: nil, shouldInterpolate: true)

    let maskedReference = imageReference!.masking(imageMask!)

    let maskedImage = UIImage(cgImage:maskedReference!)

    return maskedImage

    • Cristián Arenas Ulloa

      Here’s a version that returns the mask instead of crashing if one of those properties turns out to be nil

  • Bhautik

    After taking image from camera in result image the background image change it’s orientation. Could you please suggest me what’s wrong with my code?

    Here is my code

    “self.plainImage” is camera image
    let img = self.maskImage(image: self.plainImage, withMask: UIImage(named: “waterMark”)!)

    func maskImage(image: UIImage, withMask maskImage: UIImage) -> UIImage {

    let maskRef = maskImage.cgImage

    let mask = CGImage(
    maskWidth: maskRef!.width,
    height: maskRef!.height,
    bitsPerComponent: maskRef!.bitsPerComponent,
    bitsPerPixel: maskRef!.bitsPerPixel,
    bytesPerRow: maskRef!.bytesPerRow,
    provider: maskRef!.dataProvider!,
    decode: nil,
    shouldInterpolate: false)

    let masked = image.cgImage!.masking(mask!)
    let maskedImage = UIImage(cgImage: masked!)

    return maskedImage

  • Swifty Codes

    How to save this Output image i.e after masking to Gallery (Photos) ??

    I am doing this! –> imageView.image = maskImage(image: image!, mask: maskingImage!)

    UIImageWriteToSavedPhotosAlbum(self.imageView.image!, nil, nil, nil)

    But the image that is getting saved is –> image2.png and not the masked Image!

  • Kirti Chavda

    facing same problem which is already told as @@saulodourado:disqus can you provide solution
    want to move and zoom image which is being masked image only