在屏幕截图期间，拉伸的UIView背景被截断

Question

So, I am taking a screenshot of a subclassed UIView that I save into the device's photo stream.

Problem:

The problem is that I use resizableImageWithCapInsets to add a stretched background to my UIView, but this background gets cut off on the right side and I have no idea why. If someone could help me out it would be highly appreciated.

I add the stretched background to my UIView the following way:

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

Which 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 printscreen is done with this method (RINDiagramView is the name of my subclassed UIView, which I am taking a screenshot of). The rotation is in there because I need the image rotated when I save it, but I commented out that part and that is not what does the background to act weird.

- (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 use Xcode 5.1 and everything is done programmatically (no storyboard and such). The base SDK is iOS 7.1.

Answer 1

If you're doing iOS 7+ you can use the new drawViewHierarchyInRect:afterScreenUpdates: and related methods which Apple says are really performant.

Even if you're targeting iOS 6 you should give it a try to see if you get the same problem.

Answer 2

Try using the correct scale?

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

Use a different 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 a right-side cut image is caused by this line

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

You made the image orientation to left, the context will thought the left-side is your top-side.And your size has a minus to the height value, so the result turns to the right-side is cut.

About the rotation, I added some code into your code.Hopes it 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];

for retina display, change the first line into 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, may you get help..