How do I apply a Custom Filter

Question

I am using AlamofireImage to download an image from my CDN however I would like to apply a custom filter (Grey Scale) to SOME of the images that are downloaded. Currently I am using a scrollView to show all available images and if an image has a particular attribute, apply the filter.

I am new to AlamofireImage so I don't know how to apply a custom filter.

I have applied

let imageFilter = BlurFilter(blurRadius: 10)

to the filter parameter so I know the actual filter process is working but can someone please help with creating a custom filter to apply grey scale to downloaded image?

Answer 1

Approach #1

Use Alamofireimage's "imageWithAppliedCoreImageFilter" UIImage extension. But for some reason they don't provide easy protocol access to this filter option, so let's create one...

public struct CoreImageFilter: ImageFilter {

    let filterName: String
    let parameters: [String: AnyObject]

    public init(filterName : String, parameters : [String : AnyObject]?) {
        self.filterName = filterName
        self.parameters = parameters ?? [:]
    }

    public var filter: UIImage -> UIImage {
        return { image in
            return image.af_imageWithAppliedCoreImageFilter(self.filterName, parameters: self.parameters) ?? image
    }
}

Usage should be familiar to the Alamofireimage user:

let imageView = UIImageView(frame: frame)
let URL = NSURL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!
let color = CIColor(color: UIColor.grayColor())  // or whatever color desired
let intensity = 1.0  // 1.0 is the default, but setting it manually here to allow adjustment
let filter = CoreImageFilter(filterName: "CIColorMonochrome", parameters: ["inputColor": color, "inputIntensity" : intensity])

imageView.af_setImageWithURL(
    URL,
    placeholderImage: placeholderImage,
    filter: filter
)

If you're not happy with the CIColorMonochrome filter (I wasn't), here are some other options...

let filter = CoreImageFilter(filterName: "CIPhotoEffectTonal", parameters: nil)

or

let filter = CoreImageFilter(filterName: "CIPhotoEffectNoir", parameters: nil)

Here's a link to the complete list of available filters on the Apple dev site.

Approach #2

Find a custom filter, such as the top rated answer to What is the best Core Image filter to produce black and white effects?.

Then create a extension. Credit Shmidt and DerGote for the body of the code below.

extension UIImage {
    public func ff_imageFilteredToGrayScale() -> UIImage? {
        let context = CIContext(options: nil)
        let ciImage = CoreImage.CIImage(image: self)!

        // Set image color to b/w
        let bwFilter = CIFilter(name: "CIColorControls")!
        bwFilter.setValuesForKeysWithDictionary([kCIInputImageKey:ciImage, kCIInputBrightnessKey:NSNumber(float: 0.0), kCIInputContrastKey:NSNumber(float: 1.1), kCIInputSaturationKey:NSNumber(float: 0.0)])
        let bwFilterOutput = (bwFilter.outputImage)!

        // Adjust exposure
        let exposureFilter = CIFilter(name: "CIExposureAdjust")!
        exposureFilter.setValuesForKeysWithDictionary([kCIInputImageKey:bwFilterOutput, kCIInputEVKey:NSNumber(float: 0.7)])
        let exposureFilterOutput = (exposureFilter.outputImage)!

        // Create UIImage from context
        let bwCGIImage = context.createCGImage(exposureFilterOutput, fromRect: ciImage.extent)
        let resultImage = UIImage(CGImage: bwCGIImage, scale: 1.0, orientation: self.imageOrientation)

        return resultImage
    }
}

and the struct...

public struct GrayScaleFilter: ImageFilter {

    public init() {
    }

    public var filter: UIImage -> UIImage {
        return { image in
            return image.ff_imageFilteredToGrayScale() ?? image
        }
    }
}

And finally, Usage...

let imageView = UIImageView(frame: frame)
let URL = NSURL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!

let filter = GrayScaleFilter()

imageView.af_setImageWithURL(
    URL,
    placeholderImage: placeholderImage,
    filter: filter
)