UIImage with resizableimagewithcapinsets is distorted when trying to convert containing view to UIImage using [layer renderInContext:]

Question

I have a view with this hierarchy:

-UIView -UIImageView -UILabel

UIImageView contains a UIImage with a resizable/stretchable image created with resizableimagewithcapinsets.

When I take a screenshot everything looks fine:

https://i.stack.imgur.com/uA6Lg.png

But when I try to capture the view to an UIImage the result is like this:

https://i.stack.imgur.com/IzUyS.jpg

As you can see the bottom of the stretched image looks funny.

This is the code I use to capture the view to an UIImage:

- (UIImage *) imageWithView:(UIView *)view
{
    [view setBackgroundColor:[UIColor whiteColor]];
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 2.0);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    [view setBackgroundColor:[UIColor clearColor]];
    return img;
}

Note: The app will only be used in @2x devices.

Is the image view pinned to be the same size as the container view? They have the same frame size? — Wain, Oct 19 '13 at 22:33
Neither ImageView nor the view containing it has no constraints or pins. They have static sizes and locations. Image view is 20px narrower and shorter than the container view as margins. — Ömer Karışman, Oct 19 '13 at 23:33
Try to use view.frame.size instead of view.bounds.size. Does this help? — user1567896, Oct 19 '13 at 23:45
Already tried that. Also tried supplying a static size. And also tried adding the view in a new view. Non of them helps. — Ömer Karışman, Oct 20 '13 at 07:29

score 0 · Accepted Answer · answered Oct 20 '13 at 08:24

It seems that resizableImageWithCapInsets: is problematic when trying to capture a view`s layer.

Reverting back to the deprecated stretchableImageWIthLeftCapWidth:topCapHeight: method solved it. But doesn't feel right to revert back to a deprecated method, I'd be glad if anyone can solve the problem as is.

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Use of drawViewHierarchyInRect to replace renderInContext . For more information, refer to How to render view into image faster?

edited May 23 '17 at 12:22

Community

1
1

answered Aug 03 '16 at 02:57

Fly

13
4

score 0 · Answer 3 · answered Mar 04 '21 at 16:23

I've just had a similar issue (though now written in Swift) and came across this question when hunting for a solution.

I found that the solution for me was to make sure the centre 'stretchable' part of the image I was using was only a 1x1 pixel.

I think problems occur when the area to render to is smaller than the original resizable image used.

UIImage with resizableimagewithcapinsets is distorted when trying to convert containing view to UIImage using [layer renderInContext:]

3 Answers3