Save UIView to a transparent PNG

Question

I have a UIView and I want it to be stored as a transparent PNG, i.e. without the UIVIew background color...

I am currently using this code and it's working OK but with the background color :(

UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage* image1 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *imageData = UIImagePNGRepresentation(image1);
[imageData writeToFile:filePath atomically:YES];

So does anyone have any idea about getting this image as a transparent one?

Thank you in advance..

Try to set the view's backgroundColor to [UIColor clearColor]; — jsadfeew, Jan 19 '11 at 17:00
thank you for your response, the point is that I want the user to see the background and I want to generate the image and store it in the documents while the app is running :( — , Jan 19 '11 at 20:28
Did you ever get this to work? I need to do something similar. — Travis, Oct 11 '11 at 06:43
You can just add your transparent view as subview of a view that has the background color, but only the transparent view gets rendered to PNG. — Pascal, Apr 03 '12 at 14:30
if you, like me, came here to find out how you convert an UIView to png, note that you have to #import . — audub, Nov 07 '12 at 21:01

score 10 · Answer 1 · answered May 05 '14 at 12:29

10

In my case, I forgot the opaque property. It should be set to NO:

view.opaque = NO;

answered May 05 '14 at 12:29

Lukas Kalinski

2,213
24
26

This was the missing link! I used this (http://stackoverflow.com/a/22494886/251394) answer to save the image. – srik Dec 19 '14 at 16:43

score 7 · Answer 2 · answered Dec 07 '11 at 20:28

Change the background color to [UIColor clear], draw the image and then set the background color back to the original color.

Since GUI updates will fire only on the next runloop cycle, the user should not see any flickering.

UIColor* color=self.backgroundColor;
view.backgroundColor=[UIColor clearColor];

UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage* image1 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *imageData = UIImagePNGRepresentation(image1);
[imageData writeToFile:filePath atomically:YES];

self.backgroundColor=color;

score 3 · Answer 3 · edited May 23 '17 at 12:13

As an addition to Gilad's answer. On retina display this may cause some quality issues. To get the retina context you may use this code from this post.

UIColor* color=self.backgroundColor;
view.backgroundColor=[UIColor clearColor];

// This is for retina render check
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)])
    UIGraphicsBeginImageContextWithOptions(YourView.frame.size, NO, [UIScreen mainScreen].scale);
else
    UIGraphicsBeginImageContext(keyWindow.bounds.size);
// And it goes up to here the rest stays the same

[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage* image1 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *imageData = UIImagePNGRepresentation(image1);
[imageData writeToFile:filePath atomically:YES];

self.backgroundColor=color;

score 0 · Answer 4 · answered Dec 04 '17 at 13:15

For Objective-c you have to set opaque = NO

 + (UIImage *) imageWithView:(UIView *)view 
    {     
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, [[UIScreen mainScreen] scale]);     
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];     
        UIImage * img = UIGraphicsGetImageFromCurrentImageContext();     
        UIGraphicsEndImageContext();     
        return img; 
    }

For Swift you have to set opaque = false

func imageWithView(inView: UIView) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(inView.bounds.size, false, 0.0)
        if let context = UIGraphicsGetCurrentContext() {
            inView.layer.render(in: context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
        return nil
    }

Save UIView to a transparent PNG

4 Answers4