CODEWITHSUNDEEP
objective-ciosxcodeimageretina-display
Ted
Ted

Reputation: 3875

Retina display for an image from URL

I have some images I need to get from the web. Just using data from a URL.
They need to show correctly on Retina Display.
When I get the images from the web, they still look pixelated. I need to set the images' scale to retina display (2.0), but I must be missing something. Here's what I did so far.

UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:@"http://www.msdomains.com/tmp/test.png"];

CGRect labelFrame = CGRectMake(0,0,64,64);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:labelFrame];
imageView.contentScaleFactor = [UIScreen mainScreen].scale;

[imageView setImage:img];
[self addSubview:imageView];
[imageView release];

Upvotes: 7

Views: 2399

Answers (4)

shahil
shahil

Reputation: 1001

when you directly assign the image URL to imageView, it will not take it as retina.

imageView.imageURL = [NSURL URLWithString:@"http://example.com/image.png"];

will not give you a retina image.

So, inspite your image is 200x200 but if your imageView is 100x100 then it will take 100x100 from the downloaded image and show pixelated image on retina devices.

Solution would be to use the image property of imageView instead of imageURL.

imageView.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://example.com/image.png"]]];

This will assign 200x200 image to the imageView of 100x100 and hence the image will not be pixelated.

Upvotes: 0

pre
pre

Reputation: 3506

Try adding #@2x.png at the end of your URL. That wont change the URL, but the image will be recognized as a retina @2x image. It worked for me, but I used this method with SDWebImage.

e.g. using http://www.msdomains.com/tmp/test.png#@2x.png.

Upvotes: 7

Martin Kenny
Martin Kenny

Reputation: 2488

Your code should work pretty much as-is. I don't know what the original dimensions of your image were, but I'd guess they were 64x64 px. In order to scale down correctly, the original image would need to be 128x128 px.

As a test, the following code correctly displayed my photo in Retina resolution on the Simulator, and on my iPhone 4:

UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.seenobjects.org/images/mediumlarge/2006-08-19-native-lilac.jpg"]]];

CGRect labelFrame = CGRectMake(0, 0, 375, 249.5);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:labelFrame];

[imageView setImage:img];
[self.view addSubview:imageView];

Note that the UIImageView is 375x249.5 points, which is half of the original (pixel) dimensions of the photo. Also, setting the contentScaleFactor didn't seem to be necessary.

(As an aside, I can't see that specifying @2x on the URL will help, in this case, as the call to dataWithContentsOfURL: will return an opaque blob of data, with no trace of the filename left. It's that opaque data that's then passed to imageWithData: to load the image.)

Upvotes: 3

Obaid Maroof
Obaid Maroof

Reputation: 1579

For retina display, add the same image with the resolution which is exactly the double of the original image. dont forget to add "@2x"at the end of this image name... e.g. "image_header.png" is an image 320x100 then another image with name "[email protected]" (dimension 640x200) will be selected for the retina display automatically by the OS... hope it helps

Upvotes: -1

Related Questions