How to resize an image and avoid it being blurry?

Question

I am currently using code that is not blurry but it just cuts a piece out, and if I try to use different ones online, it cuts a piece out and it becomes blurry as well. What do I need to be doing, the picture is 512x512 trying to get it down to 100x100 and it is a jpg.

Here is the code I use now:

//setting up each cell
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                     cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        CollectionGridCell *myCell = [collectionView
                                        dequeueReusableCellWithReuseIdentifier:@"GridCell"
                                        forIndexPath:indexPath];


        long row = [indexPath row];

           NSURL *baseUrl = [NSURL URLWithString:@"http://example.com/"];

    NSString *imageItemName = [homeImages objectAtIndex:row];
    NSURL *url = [NSURL URLWithString:imageItemName relativeToURL:baseUrl];

   // NSURL *url = /* prepare a url... see note below */
    [myCell.homeImage setImageWithURL:url
                     placeholderImage:[UIImage imageNamed:@"menuButton.png"]
                            completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                                // inspect cacheType here to make sure it's cached as you want it
                               myCell.homeImage.image = [self resizeImage:image newSize:CGSizeMake(75,75)];

                            }];

    return myCell;

}


- (UIImage *)resizeImage:(UIImage*)image newSize:(CGSize)newSize {
    CGRect newRect = CGRectIntegral(CGRectMake(0, 0, newSize.width, newSize.height));
    CGImageRef imageRef = image.CGImage;

    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Set the quality level to use when rescaling
    CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, newSize.height);

    CGContextConcatCTM(context, flipVertical);
    // Draw into the context; this scales the image
    CGContextDrawImage(context, newRect, imageRef);

    // Get the resized image from the context and a UIImage
    CGImageRef newImageRef = CGBitmapContextCreateImage(context);
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];

    CGImageRelease(newImageRef);
    UIGraphicsEndImageContext();

    return newImage;

}

UPDATE: Every method I tried even the ones below so far, lead to a cropping out of the middle. Do I have to specify something else in my code, is there something calling it to crop out the middle?

This is my grid cell .h file:

#import <UIKit/UIKit.h>

@interface CollectionGridCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *homeImage;

@end

This is my grid cell .m file:

#import "CollectionGridCell.h"

@implementation CollectionGridCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

Apurv · Accepted Answer · 2014-04-28T06:21:52.787

1

There is no need to re-size the image. Just set below property to your image view.

 [myCell.homeImage setImageWithURL:url
                     placeholderImage:[UIImage imageNamed:@"menuButton.png"]
                            completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
                                // inspect cacheType here to make sure it's cached as you want it
                               myCell.homeImage.image = image;
                               myCell.homeImage.contentMode = UIViewContentModeScaleAspectFit;
                            }];

edited Apr 28 '14 at 06:21

answered Apr 28 '14 at 06:16

Apurv

17,116
8
51
67

Where would I include this right where I call the resize method, because doing that does not seem to scale the image down? How would I specify if I want it 100x 100 or 50x50 i.e. – Lion789 Apr 28 '14 at 06:20
There is no need to call re-size function. See the updated answer. Image will be fit automatically in ImageView. – Apurv Apr 28 '14 at 06:22
Ok but doing this method it seems to just crop out the middle of the image and does not show the whole image just smaller... – Lion789 Apr 28 '14 at 06:26
Is there something in my code maybe that I need to change since all these methods always seem to crop the middle out? – Lion789 Apr 28 '14 at 06:31
Provide proper frame to myCell.homeImage.frame. Also, share the code for myCell class. – Apurv Apr 28 '14 at 06:34
Ok I added the cell class, what do you mean by proper frame, what should I be adding for that? – Lion789 Apr 28 '14 at 06:38
cell.homeImage.frame = CGRectMake(x_origin, y_origin, 100,100); – Apurv Apr 28 '14 at 06:42

score 0 · Answer 2 · edited May 23 '17 at 12:11

Here is a Simple solution:

- (UIImage *)resizeImage:(UIImage*)image newSize:(CGSize)newSize {
    CGRect newRect = CGRectIntegral(CGRectMake(0, 0, newSize.width, newSize.height));
    CGImageRef imageRef = image.CGImage;

    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Set the quality level to use when rescaling
    CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, newSize.height);

    CGContextConcatCTM(context, flipVertical);  
    // Draw into the context; this scales the image
    CGContextDrawImage(context, newRect, imageRef);

    // Get the resized image from the context and a UIImage
    CGImageRef newImageRef = CGBitmapContextCreateImage(context);
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];

    CGImageRelease(newImageRef);
    UIGraphicsEndImageContext();    

    return newImage;
}

Referred from this Link:-

http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/.

How to scale down a UIImage and make it crispy / sharp at the same time instead of blurry?

Ramdhas · Answer 3 · 2014-04-28T06:23:01.930

0

Method :

CGRect rect = CGRectMake(0,0,100,100);
UIGraphicsBeginImageContext(rect.size );
[yourCurrentOriginalImage drawInRect:rect];
UIImage *picture1 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

NSData *imageData = UIImagePNGRepresentation(picture1);
UIImage *img=[UIImage imageWithData:imageData];

Method 2:

CGSize newSize = CGSizeMake(100, 100);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)]; //image => Your imageName
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();

ImageView.contentMode = UIViewContentModeScaleAspectFit;

edited Apr 28 '14 at 06:23

answered Apr 28 '14 at 06:09

Ramdhas

1,765
1
18
26

Trying this does not scale the image and just cuts out a piece of it, so I only see a 100x100 piece of the whole image – Lion789 Apr 28 '14 at 06:15
Still the same issue but look at my UPDATE not sure if at this point it is something else that needs to be fixed in my code – Lion789 Apr 28 '14 at 06:31

How to resize an image and avoid it being blurry?

3 Answers3