Convert UIImage to grayscale keeping image quality

Question

I have this extension (found in obj-c and I converted it to Swift3) to get the same UIImage but grayscaled:

public func getGrayScale() -> UIImage
{
    let imgRect = CGRect(x: 0, y: 0, width: width, height: height)

    let colorSpace = CGColorSpaceCreateDeviceGray()

    let context = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: CGBitmapInfo(rawValue: CGImageAlphaInfo.none.rawValue).rawValue)
    context?.draw(self.cgImage!, in: imgRect)

    let imageRef = context!.makeImage()
    let newImg = UIImage(cgImage: imageRef!)

    return newImg
}

I can see the gray image but its quality is pretty bad... The only thing I can see that's related to the quality is bitsPerComponent: 8 in the context contructor. However looking at Apple's doc, here is what I get:

It shows that iOS only supports 8bpc... Thus why can't I improve the quality ?

Check your width and height to make sure the original is not 2x the size. — MoDJ, Oct 21 '16 at 17:54

Joe · Accepted Answer · 2017-03-20T21:40:18.950

Try below code:

Note: code Updated and error been fixed...

Code tested in Swift 3.
originalImage is the image that you trying to convert.

Answer 1:

     var context = CIContext(options: nil)

Update: CIContext is the Core Image component that handles rendering and All of the processing of a core image is done in a CIContext. This is somewhat similar to a Core Graphics or OpenGL context.For more info available in Apple Doc.

     func Noir() {

        let currentFilter = CIFilter(name: "CIPhotoEffectNoir") 
        currentFilter!.setValue(CIImage(image: originalImage.image!), forKey: kCIInputImageKey)
        let output = currentFilter!.outputImage 
        let cgimg = context.createCGImage(output!,from: output!.extent)
        let processedImage = UIImage(cgImage: cgimg!)
        originalImage.image = processedImage
      }

Also you need to Considered following filter that can produce similar effect

CIPhotoEffectMono
CIPhotoEffectTonal

Output from Answer 1:

Output from Answer 2:

Improved answer :

Answer 2: Auto adjusting input image before applying coreImage filter

var context = CIContext(options: nil)

func Noir() {


    //Auto Adjustment to Input Image
    var inputImage = CIImage(image: originalImage.image!)
    let options:[String : AnyObject] = [CIDetectorImageOrientation:1 as AnyObject]
    let filters = inputImage!.autoAdjustmentFilters(options: options)

    for filter: CIFilter in filters {
       filter.setValue(inputImage, forKey: kCIInputImageKey)
   inputImage =  filter.outputImage
      }
    let cgImage = context.createCGImage(inputImage!, from: inputImage!.extent)
    self.originalImage.image =  UIImage(cgImage: cgImage!)

    //Apply noir Filter
    let currentFilter = CIFilter(name: "CIPhotoEffectTonal") 
    currentFilter!.setValue(CIImage(image: UIImage(cgImage: cgImage!)), forKey: kCIInputImageKey)

    let output = currentFilter!.outputImage 
    let cgimg = context.createCGImage(output!, from: output!.extent)
    let processedImage = UIImage(cgImage: cgimg!)
    originalImage.image = processedImage

}

Note: If you want to see the better result.You should be testing your code on real device not in the simulator...

CodeBender · Answer 2 · 2018-02-15T15:29:53.343

28

A Swift 4.0 extension that returns an optional UIImage to avoid any potential crashes down the road.

import UIKit

extension UIImage {
    var noir: UIImage? {
        let context = CIContext(options: nil)
        guard let currentFilter = CIFilter(name: "CIPhotoEffectNoir") else { return nil }
        currentFilter.setValue(CIImage(image: self), forKey: kCIInputImageKey)
        if let output = currentFilter.outputImage,
            let cgImage = context.createCGImage(output, from: output.extent) {
            return UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)
        }
        return nil
    }
}

To use this:

let image = UIImage(...)
let noirImage = image.noir // noirImage is an optional UIImage (UIImage?)

edited Feb 15 '18 at 15:29

answered Jan 30 '18 at 19:33

CodeBender

30,010
12
103
113

How do you use this in the code? Can you give an example usage? – Sasuke Uchiha Feb 15 '18 at 12:15
Works perfectly in Swift 5.1 – Yossi Tsafar Apr 11 '20 at 16:02

score 13 · Answer 3 · answered Dec 17 '17 at 14:07

13

Joe's answer as an UIImage exension for Swift 4 working correctly for different scales:

extension UIImage {
    var noir: UIImage {
        let context = CIContext(options: nil)
        let currentFilter = CIFilter(name: "CIPhotoEffectNoir")!
        currentFilter.setValue(CIImage(image: self), forKey: kCIInputImageKey)
        let output = currentFilter.outputImage!
        let cgImage = context.createCGImage(output, from: output.extent)!
        let processedImage = UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)

        return processedImage
    }
}

answered Dec 17 '17 at 14:07

Peter Prokop

711
1
8
18

Also how can we get back the original image? – Sasuke Uchiha Feb 15 '18 at 13:02
@SasukeUchiha please see CodeBender's answer. I'm afraid there is no way to get original image back, as most colour information is lost after applying noir filter – Peter Prokop Feb 17 '18 at 15:55

score 6 · Answer 4 · answered Oct 21 '16 at 16:36

I'd use CoreImage, which may keep the quality.

func convertImageToBW(image:UIImage) -> UIImage {

    let filter = CIFilter(name: "CIPhotoEffectMono")

    // convert UIImage to CIImage and set as input

    let ciInput = CIImage(image: image)
    filter?.setValue(ciInput, forKey: "inputImage")

    // get output CIImage, render as CGImage first to retain proper UIImage scale

    let ciOutput = filter?.outputImage
    let ciContext = CIContext()
    let cgImage = ciContext.createCGImage(ciOutput!, from: (ciOutput?.extent)!)

    return UIImage(cgImage: cgImage!)
}

Depending on how you use this code, you may want to create the CIContext outside of it for performance reasons.

score 6 · Answer 5 · answered Dec 28 '16 at 02:36

Here's a category in objective c. Note that, critically, this version takes scale into consideration.

- (UIImage *)grayscaleImage{
    return [self imageWithCIFilter:@"CIPhotoEffectMono"];
}

- (UIImage *)imageWithCIFilter:(NSString*)filterName{
    CIImage *unfiltered = [CIImage imageWithCGImage:self.CGImage];
    CIFilter *filter = [CIFilter filterWithName:filterName];
    [filter setValue:unfiltered forKey:kCIInputImageKey];
    CIImage *filtered = [filter outputImage];
    CIContext *context = [CIContext contextWithOptions:nil];
    CGImageRef cgimage = [context createCGImage:filtered fromRect:CGRectMake(0, 0, self.size.width*self.scale, self.size.height*self.scale)];
    // Do not use initWithCIImage because that renders the filter each time the image is displayed.  This causes slow scrolling in tableviews.
    UIImage *image = [[UIImage alloc] initWithCGImage:cgimage scale:self.scale orientation:self.imageOrientation];
    CGImageRelease(cgimage);
    return image;
}

but he's not the only person there :), thanks @arsenius – slxl Jan 24 '18 at 05:50 — slxl, Jan 24 '18 at 05:50
Yup, this was exactly what I needed :) – Jeremy Fuller Jan 12 '19 at 01:03 — Jeremy Fuller, Jan 12 '19 at 01:03

score 3 · Answer 6 · answered Apr 13 '18 at 07:53

save curent orientation and scale:

extension UIImage {

func noir() -> UIImage {
    let context = CIContext(options: nil)

    let currentFilter = CIFilter(name: "CIPhotoEffectNoir")
    currentFilter!.setValue(CIImage(image: self), forKey: kCIInputImageKey)
    let output = currentFilter!.outputImage
    let cgimg = context.createCGImage(output!, from: output!.extent)
    let processedImage = UIImage(cgImage: cgimg!, scale: scale, orientation: imageOrientation)
    return processedImage
}}

score 1 · Answer 7 · edited Aug 04 '17 at 09:52

As per Joe answer we easily converted Original to B&W . But back to Original image refer these code :

var context = CIContext(options: nil)
var startingImage : UIImage = UIImage()

func Noir() {     
    startingImage = imgView.image!
    var inputImage = CIImage(image: imgView.image!)!
    let options:[String : AnyObject] = [CIDetectorImageOrientation:1 as AnyObject]
    let filters = inputImage.autoAdjustmentFilters(options: options)

    for filter: CIFilter in filters {
        filter.setValue(inputImage, forKey: kCIInputImageKey)
        inputImage =  filter.outputImage!
    }
    let cgImage = context.createCGImage(inputImage, from: inputImage.extent)
    self.imgView.image =  UIImage(cgImage: cgImage!)

    //Filter Logic
    let currentFilter = CIFilter(name: "CIPhotoEffectNoir")
    currentFilter!.setValue(CIImage(image: UIImage(cgImage: cgImage!)), forKey: kCIInputImageKey)

    let output = currentFilter!.outputImage
    let cgimg = context.createCGImage(output!, from: output!.extent)
    let processedImage = UIImage(cgImage: cgimg!)
    imgView.image = processedImage
}

func Original(){ 
    imgView.image = startingImage
}

this is not the way to restore the origin photo. what if add filter 2 times and wanna restore to original photo? this solution is not gonna work. — stan liu, Aug 24 '19 at 07:35

Convert UIImage to grayscale keeping image quality

7 Answers7

Linked