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 – https://www.dropbox.com/sh/keru2ikkpko62zh/AABaT2fQ1z03MyAYLlnY1r0Ta?dl=0 .

Objective-C

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),
                                             CGImageGetHeight(maskReference),
                                             CGImageGetBitsPerComponent(maskReference),
                                             CGImageGetBitsPerPixel(maskReference),
                                             CGImageGetBytesPerRow(maskReference),
                                             CGImageGetDataProvider(maskReference),
                                             NULL, // Decode is null
                                             YES // Should interpolate
                                             );
    
    CGImageRef maskedReference = CGImageCreateWithMask(imageReference, imageMask);
    CGImageRelease(imageMask);
    
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedReference];
    CGImageRelease(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];
self.imageView.image=newimage;

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

It’s just as simple as you thought.

Swift

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),
     CGImageGetHeight(maskReference),
     CGImageGetBitsPerComponent(maskReference),
     CGImageGetBitsPerPixel(maskReference),
     CGImageGetBytesPerRow(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.