Preserving the mask on a UIImage when converting it to NSData

Question

I'm working on an iOS app with Parse that requires profile pictures to be in the shape of hexagons. Right now, I'm downloading the PFFile from Parse, grabbing that image and then masking it with a hexagon. This works well for simple views like the profile screen (masking is only required once), but the app suffers severe performance issues when masking a collection view with a list of followers' profile images.

In my mind, the best solution would be to upload the profile pictures to Parse already masked correctly, so all I have to do is pull them down and display them. Here's the code that I used to do this in my sign up view controller:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {

[picker dismissViewControllerAnimated:YES completion:nil];

UIImage *chosenPicture = info[UIImagePickerControllerEditedImage];

[EVNUtility maskImage:chosenPicture withMask:[UIImage imageNamed:@"MaskImage"] withCompletionBlock:^(UIImage *maskedImage) {

    self.profileImageView.image = maskedImage;
    self.pictureData = UIImagePNGRepresentation(maskedImage);

}];

}

The image comes back correctly masked from my utility function, however when I use UIImagePNGRepresentation (or the JPG equivalent) to convert the UIImage to data (this data is then uploaded to Parse), the image loses its mask and is square again.

How can I keep the mask when converting a UIImage to NSData?

I've tried a couple of things, but I'm guessing this is due to my fuzzy understanding of how masking is done and if it affects the underlying image. Here's the reference I used for masking my image: http://iosdevelopertips.com/cocoa/how-to-mask-an-image.html

Answer 1

pass in the view that contains your image and mask to this method (I use this as an extension of UIImage)

+ (UIImage *) imageWithView:(UIView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return img;
}

this will return your 'flattened', masked image (make sure the UIView has a clear background)

you will then need to convert to PNG (not JPG) before creating a PFFile, this will retain the transparency.