UIView stretched background clipped during screenshot

Question

So, I am taking a screenshot of a subclass of UIView, which I save in the photo stream of the device.

Problem:

The problem is that I am using resizableImageWithCapInsets to add a stretched background to my UIView, but that background is clipped on the right side and I have no idea why. If someone can help me, it will be very grateful.

I add a stretched background to my UIView as follows:

 [diagramBase addSubview:[self addTileBackgroundOfSize:diagramBase.frame andType:@"ipad_diagram_border.png"]]; 

Which call calls this method:

 - (UIImageView *) addTileBackgroundOfSize:(CGRect)frame andType:(NSString *)type { frame.origin.x = 0.0f; frame.origin.y = 0.0f; UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:frame]; UIImage *image = [UIImage imageNamed:type]; UIEdgeInsets insets = UIEdgeInsetsMake(10.0f, 10.0f, 10.0f, 10.0f); UIImage *backgroundImage = [image resizableImageWithCapInsets:insets]; backgroundView.image = backgroundImage; return backgroundView; } 

The actual print screen is done using this method (RINDiagramView is the name of my subclass of UIView where I take the screenshot). The rotation happens there, because I need the image to rotate when I save it, but I commented on this part, and it’s not that the background is acting strange.

 - (UIImage *) createSnapshotOfView:(RINDiagram *) view { CGRect rect = [view bounds]; rect.size.height = rect.size.height - 81.0f; UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0f); CGContextRef context = UIGraphicsGetCurrentContext(); [view.layer renderInContext:context]; UIImage *capturedScreen = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImage *finalImage = [[UIImage alloc] initWithCGImage: capturedScreen.CGImage scale: 1.0 orientation: UIImageOrientationLeft]; return finalImage; } 

I am using Xcode 5.1 and everything is done programmatically (without storyboard, etc.). The base SDK is iOS 7.1.

Answer 1

If you are doing iOS 7+, you can use the new drawViewHierarchyInRect:afterScreenUpdates: and related methods that Apple says are really effective.

Even if you focus on iOS 6, you should try to try if you have the same problem.

Answer 2

Try using the correct scale?

 UIImage *finalImage = [[UIImage alloc] initWithCGImage: capturedScreen.CGImage scale: [[UIScreen mainScreen] scale] orientation: UIImageOrientationLeft]; 

Use another UIViewContentMode?

 UIViewContentModeScaleToFill -> check if you can see the edges UIViewContentModeScaleAspectFit -> check if you can see the edges, even if position is incorrect UIViewContentModeScaleAspectFill -> check for edge right side 

Answer 3

The reason you got the image on the right is caused by this line

 UIImage *finalImage = [[UIImage alloc] initWithCGImage: capturedScreen.CGImage scale: 1.0 orientation: UIImageOrientationLeft]; 

You did the image orientation to the left, the context will assume that the left side is your upper side. And your size has a minus to the height value, so the result is rotated to the right side.

On rotation, I added code to my code. Hope this is helpful.

 - (UIImage *) createSnapshotOfView:(UIView *) view { CGRect rect = [view bounds]; rect.size.height = rect.size.height - 81.0f; UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0f); CGContextRef context = UIGraphicsGetCurrentContext(); view.transform = CGAffineTransformMakeRotation(M_PI_2); [view.layer renderInContext:context]; UIImage *capturedScreen = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImage *finalImage = [[UIImage alloc] initWithCGImage: capturedScreen.CGImage scale: 1.0 orientation: UIImageOrientationLeft]; view.transform = CGAffineTransformMakeRotation(0); return finalImage; } 

Answer 4

 UIGraphicsBeginImageContext(self.window.bounds.size); [self.window.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); NSData * data = UIImagePNGRepresentation(image); [data writeToFile:@"foo.png" atomically:YES]; 

to display the retina, change the first line to this:

 if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) UIGraphicsBeginImageContextWithOptions(self.window.bounds.size, NO, [UIScreen mainScreen].scale); else UIGraphicsBeginImageContext(self.window.bounds.size); 

adjust your size, you can get help.