Question

I am creating an app where a user can load their schedule into the app, and it is subsequently displayed.

When the image is allowed to be edited before loading, it shows up perfectly:

Once the user “chooses” the image, it shows up in the UIImageView blurred:

Here it is slightly zoomed in:

I know that the image resolution is okay because image displays perfectly beforehand. How can I stop this from being blurred?

I am using the basic method of zooming an UIImageView in an UIScrollView.

Here is the code I use to assign the image. zoomscroll is the UIScrollView and myschedule is the UIImageView:

-(void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
[self dismissModalViewControllerAnimated:YES];

//Obtaining saving path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:@"myschedule.png"];

//Extracting image from the picker and saving it
NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];   
if ([mediaType isEqualToString:@"public.image"]){
    UIImage *editedImage = [info objectForKey:UIImagePickerControllerEditedImage];
    NSData *webData = UIImagePNGRepresentation(editedImage);
    [webData writeToFile:imagePath atomically:YES];

    myschedule.image = editedImage;

    [zoomscroll addSubview:myschedule];
    zoomscroll.contentSize = CGSizeMake(myschedule.frame.size.width , myschedule.frame.size.height);
    zoomscroll.minimumZoomScale = 1.0;
    zoomscroll.maximumZoomScale = 4.0;
}
}

Thank you!

Answer 1

iOS doesn’t redraw views when it zooms them, it just scales the view up or down. The underlying implementation is basically a textured OpenGL polygon, which is why zooming is so fast. Regenerating the texture at a higher res is slow, so iOS doesn’t do that unless you explicitly tell it to.

There are various ways you can fix this. The simplest is probably to set the contentSize of your scrollview to the actual size of the image and then zoom out initially, so that instead of zooming a small version of the image up to 400% (which results in blurring) the user is zooming back in from 25% up to 100%. Something like this:

myschedule.image = editedImage;
myschedule.frame = CGRectMake(0, 0, editedImage.size.width, editedImage.size.height);

[zoomscroll addSubview:myschedule];
zoomscroll.contentSize = editedImage.size;
zoomscroll.minimumZoomScale = 0.25;
zoomscroll.maximumZoomScale = 1.0;
zoomscroll.zoomScale = zoomscroll.minimumZoomScale;