fetching image from url is not sharp & clear - iphone

Question

I am working on one application where i have to load images from server.
I am trying to load application screenshots from a link of appstore.
I am getting the image but not so sharp & clear. I am fetching the image in background & everything works fine.But the resulted image looks a little blurry. I am testing this image in retina display. Anyone has any idea why it is happening. Any solution will be helpful.
Thanks,
Here is my code for image loading :
// This will create the imageview with required frame & use the url to load the image
-(void)loadAppsScreenShots:(int)i Frame:(CGRect)frame withImageUrl:(NSString *)urlStr
{
UIImageView *appImageView = [[UIImageView alloc] init];
frame.origin.x = 0;
appImageView.frame = frame;
appImageView.tag = i;
sharedImageCache = [ImageCache sharedImageCacheInstance];
UIImage *image1 = [sharedImageCache getCachedImage:[NSString stringWithFormat:#"%#",urlStr]];
if (image1==nil)
{
// Show indicator till image loads
UIActivityIndicatorView *indiView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
indiView.center = CGPointMake(appImageView.frame.size.width/2, appImageView.frame.size.height/2);
[appImageView addSubview:indiView];
[indiView startAnimating];
indiView.hidden = FALSE;
// Show label indicating image loading process
UILabel *loadingLbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 25)];
loadingLbl.text = #"";//#"Please wait...";
loadingLbl.center = CGPointMake(appImageView.frame.size.width/2 + 5, appImageView.frame.size.height/2 + 23);
loadingLbl.font = [UIFont fontWithName:#"Helvetica-Bold" size:15.0f];
loadingLbl.textAlignment = UITextAlignmentCenter;
loadingLbl.backgroundColor = [UIColor clearColor];
loadingLbl.textColor = [UIColor whiteColor];
[appImageView addSubview:loadingLbl];
[appImageView sendSubviewToBack:loadingLbl];
loadingLbl.hidden = FALSE;
// Dictionalry to get all objects & pass it to method where we load the data
NSMutableDictionary *dict = [[NSMutableDictionary alloc] init];
[dict setObject:appImageView forKey:#"imageView"];
if (urlStr != nil) {
[dict setObject:urlStr forKey:#"url"];
}
[dict setObject:indiView forKey:#"indi"];
[dict setObject:loadingLbl forKey:#"loadingLbl"];
[self performSelectorInBackground:#selector(loadImageFromURLAndSaveInDocDir:) withObject:dict];
}
else
{
appImageView.image = image1;
}
[[appView viewWithTag:i] addSubview:appImageView];
[appView bringSubviewToFront:appImageView];
appImageView.contentMode = UIViewContentModeScaleAspectFit;
appImageView=nil;
}
-(void)loadImageFromURLAndSaveInDocDir:(NSMutableDictionary *)dict
{
#autoreleasepool
{
UIImageView *cellImageViewObj = [dict objectForKey:#"imageView"];
NSString *url;
UIActivityIndicatorView *indiview = [dict objectForKey:#"indi"];
UILabel *Lbl = [dict objectForKey:#"loadingLbl"];
if ([dict objectForKey:#"url"])
{
url = [dict objectForKey:#"url"];
// fetch the data
NSURL *imgURL = [NSURL URLWithString:url];
NSData *imgData = [NSData dataWithContentsOfURL:imgURL];
NSString *filename = [Utils getFileNameFromURL:url];
// Cache the image
[sharedImageCache cacheImage:[NSString stringWithFormat:#"%#",filename] :imgData];
UIImage *image1 = [[UIImage alloc] initWithData:imgData];
cellImageViewObj.image = image1;
image1=nil;
}
else {
url = #"";
}
// set the content mode & hide the indicator & label
cellImageViewObj.contentMode = UIViewContentModeScaleAspectFit;
[indiview stopAnimating];
indiview.hidden = TRUE;
Lbl.hidden = TRUE;
dict = nil;
}
}
What is wrong am i doing.

Answer 1

The problem is that you are showing the image at its natural size. On a retina device, you need images which are twice as wide and twice as tall as the view they get drawn into.
Say the image is 200x200 and you are going to show it in a 100x100 view. The proper way to do this is:
get a CGImageRef of the data
create a UIImage using the below method and a scale of 2 (for retina)
(UIImage *)imageWithCGImage:(CGImageRef)imageRef scale:(CGFloat)scale orientation:(UIImageOrientation)orientation
The result is an image sized 100x100 but with a scale of two.
That said, since you specify 'UIViewContentModeScaleAspectFit', you may be able to just take the 200x200 image and had it off to the UIImageView, but in this case you must force the imageView to have a frame.size of 100x100.

Answer 2

If the image size is different than imageview, then you can proportionally scale the server image as per your view.
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize;
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {
UIImage *sourceImage = self;
UIImage *newImage = nil;
CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;
CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;
CGFloat scaleFactor = 0.0;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;
CGPoint thumbnailPoint = CGPointMake(0.0,0.0);
if (CGSizeEqualToSize(imageSize, targetSize) == NO) {
CGFloat widthFactor = targetWidth / width;
CGFloat heightFactor = targetHeight / height;
if (widthFactor < heightFactor)
scaleFactor = widthFactor;
else
scaleFactor = heightFactor;
scaledWidth = width * scaleFactor;
scaledHeight = height * scaleFactor;
// center the image
if (widthFactor < heightFactor) {
thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
} else if (widthFactor > heightFactor) {
thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
}
}
// this is actually the interesting part:
UIGraphicsBeginImageContext(targetSize);
CGRect thumbnailRect = CGRectZero;
thumbnailRect.origin = thumbnailPoint;
thumbnailRect.size.width = scaledWidth;
thumbnailRect.size.height = scaledHeight;
[sourceImage drawInRect:thumbnailRect];
newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
if(newImage == nil) NSLog(#"could not scale image");
return newImage ;
}