CODEWITHSUNDEEP
iphoneiosuiviewuiimagequartz-graphics
DanM
DanM

Reputation: 7197

Uiimage from UIView: higher than on-screen resolution?

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!

Upvotes: 20

Views: 4221

Answers (3)

David Hoerl
David Hoerl

Reputation: 41642

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];
            }       
        } ];
}

Upvotes: 10

mvds
mvds

Reputation: 47084

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.

Upvotes: 0

unexpectedvalue
unexpectedvalue

Reputation: 6139

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;

Upvotes: 2

Related Questions