Uiimage from UIView: higher than on-screen resolution?

Question

I've got a UIView which I'm rendering to a UIImage via the typical UIGraphicsBeginImageContextWithOptions method, using a scale of 2.0 so the image output will always be the "retina display" version of what would show up onscreen, regardless of the user's actual screen resolution.

The UIView I'm rendering contains both images and text (UIImages and UILabels). The image is appearing in the rendered UIImage at its full resolution, and looks great. But the UILabels appear to have been rasterized at a 1.0 scale and then upscaled to 2.0, resulting in blurry text.

Is there something I'm doing wrong, or is there some way to get the text to render nice and crisp at the higher scale level? Or is there some way to do this other than using the scaling parameter of UIGraphicsBeginImageContextWithOptions that would have better results? Thanks!

David H · Accepted Answer · 2012-07-31T00:44:14.580

The solution is to change the labels's contentsScale to 2 before you draw it, then set it back immediately thereafter. I just coded up a project to verify it, and its working just fine making a 2x image in a normal retina phone (simulator). [If you have a public place I can put it let me know.]

EDIT: the extended code walks the subviews and any container UIViews to set/unset the scale

- (IBAction)snapShot:(id)sender
{
    [self changeScaleforView:snapView scale:2];

    UIGraphicsBeginImageContextWithOptions(snapView.bounds.size, snapView.opaque, 2);
    [snapView.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    imageDisplay.image = img; // contentsScale
    imageDisplay.contentMode = UIViewContentModeScaleAspectFit;

    [self changeScaleforView:snapView scale:1];
}

- (void)changeScaleforView:(UIView *)aView scale:(CGFloat)scale
{
    [aView.subviews enumerateObjectsUsingBlock:^void(UIView *v, NSUInteger idx, BOOL *stop)
        {
            if([v isKindOfClass:[UILabel class]]) {
                v.layer.contentsScale = scale;
            } else
            if([v isKindOfClass:[UIImageView class]]) {
                // labels and images
                // v.layer.contentsScale = scale; won't work

                // if the image is not "@2x", you could subclass UIImageView and set the name of the @2x
                // on it as a property, then here you would set this imageNamed as the image, then undo it later
            } else
            if([v isMemberOfClass:[UIView class]]) {
                // container view
                [self changeScaleforView:v scale:scale];
            }       
        } ];
}

This works, but if you are trying to capture a UITableView it is a pain to change each layer individually. Isn't there a way to change it for all subviews recursively? — charliehorse55, Jul 28 '12 at 22:20
Well, no single command that I know of, but note expanded code will recurse and do most of the work. You will have to do something special if you don't set a imageViews to a 2x image (which works fine for non-retina displays, just makes a bit more work for the system when rendering. — David H, Jul 31 '12 at 00:45

unexpectedvalue · Answer 2 · 2011-03-28T12:40:01.777

2

Try rendering to an image with double size, and then create the scaled image:

UIGraphicsBeginImageContextWithOptions(size, NO, 1.0);
// Do stuff
UImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

newImage=[UIImage imageWithCGImage:[newImage CGImage] scale:2.0 orientation:UIImageOrientationUp];

Where: size = realSize * scale;

edited Mar 28 '11 at 12:40

answered Mar 27 '11 at 14:10

unexpectedvalue

6,079
3
38
62

Not sure I understand what you're saying. I don't have a CGImage I'm working with, I have a UIView, which I'm then rendering into a UIImage... – DanM Mar 28 '11 at 12:19
Edited. It should do what you want. – unexpectedvalue Mar 28 '11 at 12:40
1

isn't that just going to scale *everything* up? So now both the text *and* the image will be blurry? – DanM Mar 29 '11 at 14:35
1

Try it. You render to a large texture, with double the resolution, and then you create the scaled version. – unexpectedvalue Mar 29 '11 at 20:01
Text and a few other UI elements are still blurry in this mode. – charliehorse55 Jul 27 '12 at 21:10
This works great. People who complain text is blurry seem to be missing the last step where the double-scaled image is scaled back down to 1.0. – Bruno Philipe Mar 07 '18 at 23:34

score 0 · Answer 3 · answered Apr 01 '11 at 23:36

I have been struggling with much the same oddities in the context of textview to PDF rendering. I found out that there are some documented properties on the CALayer objects which make up the view. Maybe setting the rasterizationScale of the relevant (sub)layer(s) helps.

Uiimage from UIView: higher than on-screen resolution?

3 Answers3