Making a UIImageView grey

Question

I'm setting UImageViews within table cells using setImageWithUrl from the AFNetworking library, but I need the images to be greyscale... is there any way I can do this. I've tried a few UIImage greyscale converters, but I guess they don't work because I'm setting something that hasn't downloaded yet.

Answer 1

instead of a uiimageView, subclass a UIView, give it

@property (strong, nonatomic) UIImage *image;

with

@synthesize image = _image;

override the setter

-(void)setImage:(UIImage *)image{
     _image = [self makeImageBW:image];
     [self setNeedsDisplay];
}

- (UIImage *)makeImageBW:(UIImage *)source
{
    CIImage *beginImage = source.CIImage;
    CIImage *blackAndWhite = [CIFilter filterWithName:@"CIColorControls" keysAndValues:kCIInputImageKey, beginImage, @"inputBrightness", [NSNumber numberWithFloat:0.0], @"inputContrast", [NSNumber numberWithFloat:1.1], @"inputSaturation", [NSNumber numberWithFloat:0.0], nil].outputImage;
    CIImage *output = [CIFilter filterWithName:@"CIExposureAdjust" keysAndValues:kCIInputImageKey, blackAndWhite, @"inputEV", [NSNumber numberWithFloat:0.7], nil].outputImage; 
    CIContext *context = [CIContext contextWithOptions:nil];
    CGImageRef ref = [context createCGImage:output fromRect:output.extent];
    UIImage *newImage = [UIImage imageWithCGImage:ref];
    CGImageRelease(cgiimage);
    return newImage;
}

-(void)drawRect:(CGRect)rect{
     [_image drawInRect:rect];
}

somewhere else you can set the image with your NSURLRequest:

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0),^{
      NSData *data = [NSURLConnection sendSynchronousRequest:(NSURLRequest *) returningResponse:nil error:nil];
      if (data){
           UIImage *image = [UIImage imageWithData:data];
           if (image) dispatch_async(dispatch_get_main_queue(),^{
                [view setImage:image];
           });
      }
 });

Answer 2

This thread is a bit old but I came across it on my search. In this post I've pointed out 2 different methods in Swift to create a grayscale image that can be displayed in an imageView considering the alpha and scale of the image.

import CoreImage

extension UIImage
{
    /// Applies grayscale with CIColorControls by settings saturation to 0.0.
    /// - Parameter brightness: Default is 0.0.
    /// - Parameter contrast: Default is 1.0.
    /// - Returns: The grayscale image of self if available.
    func grayscaleImage(brightness: Double = 0.0, contrast: Double = 1.0) -> UIImage?
    {
        if let ciImage = CoreImage.CIImage(image: self, options: nil)
        {
            let paramsColor: [String : AnyObject] = [ kCIInputBrightnessKey: NSNumber(double: brightness),
                                                      kCIInputContrastKey:   NSNumber(double: contrast),
                                                      kCIInputSaturationKey: NSNumber(double: 0.0) ]
            let grayscale = ciImage.imageByApplyingFilter("CIColorControls", withInputParameters: paramsColor)

            let processedCGImage = CIContext().createCGImage(grayscale, fromRect: grayscale.extent)
            return UIImage(CGImage: processedCGImage, scale: self.scale, orientation: self.imageOrientation)
        }
        return nil
    }

    /// Create a grayscale image with alpha channel. Is 5 times faster than grayscaleImage().
    /// - Returns: The grayscale image of self if available.
    func convertToGrayScale() -> UIImage?
    {
        // Create image rectangle with current image width/height * scale
        let pixelSize = CGSize(width: self.size.width * self.scale, height: self.size.height * self.scale)
        let imageRect = CGRect(origin: CGPointZero, size: pixelSize)
        // Grayscale color space
        if let colorSpace: CGColorSpaceRef = CGColorSpaceCreateDeviceGray()
        {
            // Create bitmap content with current image size and grayscale colorspace
            let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.None.rawValue)
            if let context: CGContextRef = CGBitmapContextCreate(nil, Int(pixelSize.width), Int(pixelSize.height), 8, 0, colorSpace, bitmapInfo.rawValue)
            {
                // Draw image into current context, with specified rectangle
                // using previously defined context (with grayscale colorspace)
                CGContextDrawImage(context, imageRect, self.CGImage)
                // Create bitmap image info from pixel data in current context
                if let imageRef: CGImageRef = CGBitmapContextCreateImage(context)
                {
                    let bitmapInfoAlphaOnly = CGBitmapInfo(rawValue: CGImageAlphaInfo.Only.rawValue)
                    if let contextAlpha = CGBitmapContextCreate(nil, Int(pixelSize.width), Int(pixelSize.height), 8, 0, nil, bitmapInfoAlphaOnly.rawValue)
                    {
                        CGContextDrawImage(contextAlpha, imageRect, self.CGImage)
                        if let mask: CGImageRef = CGBitmapContextCreateImage(contextAlpha)
                        {
                            // Create a new UIImage object
                            if let newCGImage = CGImageCreateWithMask(imageRef, mask)
                            {
                                // Return the new grayscale image
                                return UIImage(CGImage: newCGImage, scale: self.scale, orientation: self.imageOrientation)
                            }
                        }
                    }
                }
            }

        }
        // A required variable was unexpected nil
        return nil
    }
}

Answer 3

Try this method:

- (UIImage *)convertImageToGrayScale:(UIImage *)image
{
  // Create image rectangle with current image width/height
  CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);

  // Grayscale color space
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

  // Create bitmap content with current image size and grayscale colorspace
  CGContextRef context = CGBitmapContextCreate(nil, image.size.width, image.size.height, 8, 0, colorSpace, kCGImageAlphaNone);

  // Draw image into current context, with specified rectangle
  // using previously defined context (with grayscale colorspace)
  CGContextDrawImage(context, imageRect, [image CGImage]);

  // Create bitmap image info from pixel data in current context
  CGImageRef imageRef = CGBitmapContextCreateImage(context);

  // Create a new UIImage object  
  UIImage *newImage = [UIImage imageWithCGImage:imageRef];

  // Release colorspace, context and bitmap information
  CGColorSpaceRelease(colorSpace);
  CGContextRelease(context);
  CFRelease(imageRef);

  // Return the new grayscale image
  return newImage;
}

I found it here: http://mobiledevelopertips.com/graphics/convert-an-image-uiimage-to-grayscale.html

Answer 4

I took the code from @Jesse Gumpo's example, above, but here it is as an interface.

@implementation UIImage ( Greyscale )

- (UIImage *)greyscaleImage
{
    CIImage * beginImage = [ self CIImage ] ;
    CIImage * evAdjustedCIImage = nil ;
    {
        CIFilter * filter = [ CIFilter filterWithName:@"CIColorControls" 
                                        keysAndValues:kCIInputImageKey, beginImage
                                            , @"inputBrightness", @0.0
                                            , @"inputContrast", @1.1
                                            , @"inputSaturation", @0.0
                                            , nil ] ;
        evAdjustedCIImage = [ filter outputImage ] ;
    }

    CIImage * resultCIImage = nil ;
    {
        CIFilter * filter = [ CIFilter filterWithName:@"CIExposureAdjust" 
                                        keysAndValues:kCIInputImageKey, evAdjustedCIImage
                                            , @"inputEV", @0.7
                                            , nil ] ;
        resultCIImage = [ filter outputImage ] ;
    }

    CIContext * context = [ CIContext contextWithOptions:nil ] ;
    CGImageRef resultCGImage = [ context createCGImage:resultCIImage 
                                              fromRect:resultCIImage.extent ] ;
    UIImage * result = [ UIImage imageWithCGImage:resultCGImage ] ;
    CGImageRelease( resultCGImage ) ;

    return result;
}

@end

Now you can just do this:

UIImage * downloadedImage = ... get from AFNetwork results ... ;
downloadedImage = [ downloadedImage greyscaleImage ] ;

... use 'downloadedImage' ...