Grayscale image view

      No Comments on Grayscale image view

Creating a grayscale image is not a problem in iOS, but I wanted to be able to animate an image view from grayscale to full color.

It turned out to be a pretty simple operation, all you have to do is create a grayscale image, and fade-in the original image. Kind of a hack, I know, but it does the job ๐Ÿ™‚ So if you start with this image:

grayscale-img1

By increasing saturation to around 50% you would get something like this:

grayscale-img2

And finally you would get this:

grayscale-img3

When we leave out the boilerplate code this is all you need:

- (UIImage *)grayscaleImage:(UIImage *)originalImage {
    UIGraphicsBeginImageContextWithOptions(originalImage.size, YES, [UIScreen mainScreen].scale);
    CGRect imageRect = CGRectMake(0, 0, originalImage.size.width, originalImage.size.height);
    [originalImage drawInRect:imageRect blendMode:kCGBlendModeLuminosity alpha:1.0];
    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return result;
}

Pretty simple. If you want to play around with this code, or use it in your own projects, feel free to download it from github: DAGrayscaleImage

Have a nice day ๐Ÿ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.