Tutorial details

How to Create Amazing Image FX with Core Image Frameworks | App Code for Sale | Preview

How to Create Amazing Image FX with Core Image Frameworks | iOS Tutorial

This tutorial is based on the component ImageFX
Download

Overview PAGE TOP

In this tutorial we'll see how to use Core Image framework that is available since iOS5. Core Image allows you to create amazing image effects and it comes with several built in filters. We'll see how to use several of those filters, so later on you can test it with your own images and set up different parameters to get nice effects with them.

We will cover 5 filters:

  1. CIColorControls Adjusts saturation, brightness, and contrast values.
  2. CIExposureAdjust Adjusts the exposure setting for an image similar to the way you control exposure for a camera when you change the F-stop.
  3. CIHighlightShadowAdjust Adjust the tonal mapping of an image while preserving spatial detail.
  4. CIHueAdjust Changes the overall hue, or tint, of the source pixels.
  5. CIColorInvert inverts the colors in an image.

image34.png

Project setup PAGE TOP

Create new project in XCode that will use single view application template.

image111.png

Define project name and we are ready to start working on it.

image298.png

Import Image PAGE TOP

The image we will use to test the effects is 640*640 pixels, so we'll add it to project by right clicking Supporting Files Folder and picking option Add Files.

image316.png

Interface Builder PAGE TOP

Add six UIButtons and one UIImageView to your main xib. Five of those buttons will be used to apply filters and one will be used to see original image.

image413.png

Set imageviews image to image you added to the project so it display as application runs.

Frameworks PAGE TOP

In Project navigator select your project and under Build Phases click + at end of Link Binary With Libraries to add additional frameworks. Framework we are adding is named CoreImage.framework.

image577.png

Programming PAGE TOP

In header file (.h) of you view controller add IBOutlet for UIImageView and add six IBAction methods.

@property (nonatomic, retain) IBOutlet UIImageView *theImageView;

- (IBAction)originalImage:(id)sender;
- (IBAction)filterOne:(id)sender;
- (IBAction)filterTwo:(id)sender;
- (IBAction)filterThree:(id)sender;
- (IBAction)filterFour:(id)sender;
- (IBAction)filterFive:(id)sender;

In main file (.m) synthesize defined image view.

@synthesize theImageView;

First IBAction named originalImage will display original image in image view. In case your image is named different change "photo-core-image.jpg" to correct name.

- (IBAction)originalImage:(id)sender
{
    theImageView.image = [UIImage imageNamed:@"photo-core-image.jpg"];
}

CIColorControls Filter PAGE TOP

CIColorControls is first filter we'll define.

CIColorControls Adjusts saturation, brightness, and contrast values.

We have to define CIImage that will initialize with value of our original image. After that we define CIFilter with name brightnesContrastFilter and we set default values to it.

Each filter have several keys, for key inputImage we set value of CIImage, for key inputBrightness we set NSNumber 0.5 and for key inputContrast we set NSNumber 2.0.

We have to create another CIImage that will hold value for output image and we show this image in our image view.

- (IBAction)filterOne:(id)sender
{
    CIImage *inputImage = [[CIImage alloc] initWithImage:
                              [UIImage imageNamed:@"photo-core-image.jpg"]];

    CIFilter *brightnesContrastFilter = [CIFilter filterWithName:@"CIColorControls"];
    [brightnesContrastFilter setDefaults];
    [brightnesContrastFilter setValue: inputImage forKey: @"inputImage"];
    [brightnesContrastFilter setValue: [NSNumber numberWithFloat:0.5f]
                                          forKey:@"inputBrightness"];
    [brightnesContrastFilter setValue: [NSNumber numberWithFloat:2.0f] 
                                          forKey:@"inputContrast"];

    CIImage *outputImage = [brightnesContrastFilter valueForKey: @"outputImage"];

    CIContext *context = [CIContext contextWithOptions:nil];

    theImageView.image = [UIImage imageWithCGImage:[context 
                                         createCGImage:outputImage 
                                         fromRect:outputImage.extent]];

    [inputImage release];
}

Result of CIColorControls filter looks like this:

image667.png

CIHueAdjust Filter PAGE TOP

CIHueAdjust Changes the overall hue, or tint, of the source pixels.

CIHueAdjust filter beside key inputImage have inputAngle since Hue is defined as color wheel. With same logic for previous filter we create this one and we set value for inputAngle to 3.0.

- (IBAction)filterTwo:(id)sender
{
    CIImage *inputImage = [[CIImage alloc] initWithImage:
                              [UIImage imageNamed:@"photo-core-image.jpg"]];

    CIFilter *hueFilter = [CIFilter filterWithName:@"CIHueAdjust"];
    [hueFilter setDefaults];
    [hueFilter setValue: inputImage forKey: @"inputImage"];
    [hueFilter setValue: [NSNumber numberWithFloat: 3.0f] forKey: @"inputAngle"];

    CIImage *outputImage = [hueFilter valueForKey: @"outputImage"];

    CIContext *context = [CIContext contextWithOptions:nil];

    theImageView.image = [UIImage imageWithCGImage:[context 
                                         createCGImage:outputImage 
                                         fromRect:outputImage.extent]];

    [inputImage release];
}

Result of CIHueAdjust filter looks like this:

image7.png

CIColorInvert Filter PAGE TOP

CIColorInvert inverts the colors in an image.

We dont define any other key here except input image key.

- (IBAction)filterThree:(id)sender
{
    CIImage *inputImage = [[CIImage alloc] initWithImage:
                              [UIImage imageNamed:@"photo-core-image.jpg"]];

    CIFilter *invertFilter = [CIFilter filterWithName:@"CIColorInvert"];
    [invertFilter setDefaults];
    [invertFilter setValue: inputImage forKey: @"inputImage"];

    CIImage *outputImage = [invertFilter valueForKey: @"outputImage"];

    CIContext *context = [CIContext contextWithOptions:nil];

    theImageView.image = [UIImage imageWithCGImage:[context 
                                         createCGImage:outputImage 
                                         fromRect:outputImage.extent]];

    [inputImage release];
}

Result of CIColorInvert filter looks like this:

image8.png

CIExposureAdjust Filter PAGE TOP

CIExposureAdjust adjusts the exposure setting for an image similar to the way you control exposure for a camera when you change the F-stop. Key we define here is named inputEV.

- (IBAction)filterFour:(id)sender
{
    CIImage *inputImage = [[CIImage alloc] initWithImage:
                              [UIImage imageNamed:@"photo-core-image.jpg"]];

    CIFilter *exposureAdjustFilter = [CIFilter filterWithName:@"CIExposureAdjust"];
    [exposureAdjustFilter setDefaults];
    [exposureAdjustFilter setValue: inputImage forKey: @"inputImage"];
    [exposureAdjustFilter setValue:[NSNumber numberWithFloat: 2.0f]
                              forKey:@"inputEV"];    
    CIImage *outputImage = [exposureAdjustFilter valueForKey: @"outputImage"];

    CIContext *context = [CIContext contextWithOptions:nil];

    theImageView.image = [UIImage imageWithCGImage:[context 
                                         createCGImage:outputImage 
                                         fromRect:outputImage.extent]];

    [inputImage release];
}

Result of CIExposureAdjust filter looks like this:

image9.png

CIHighlightShadowAdjust PAGE TOP

CIHighlightShadowAdjust adjust the tonal mapping of an image while preserving spatial detail. For this filter we set values for keys inputHighlightAmount and inputShadowAmount.

- (IBAction)filterFive:(id)sender
{
    CIImage *inputImage = [[CIImage alloc] initWithImage:
                              [UIImage imageNamed:@"photo-core-image.jpg"]];

    CIFilter *highlightShadowAdjustFilter = [CIFilter
                 filterWithName:@"CIHighlightShadowAdjust"];
    [highlightShadowAdjustFilter setDefaults];
    [highlightShadowAdjustFilter setValue: inputImage forKey: @"inputImage"];
    [highlightShadowAdjustFilter setValue:[NSNumber numberWithFloat: 1.0f]
                 forKey:@"inputHighlightAmount"];    
    [highlightShadowAdjustFilter setValue:[NSNumber numberWithFloat: 0.5f] 
                 forKey:@"inputShadowAmount"];    
    CIImage *outputImage = [highlightShadowAdjustFilter
                 valueForKey: @"outputImage"];

    CIContext *context = [CIContext contextWithOptions:nil];

    theImageView.image = [UIImage imageWithCGImage:[context 
                                         createCGImage:outputImage 
                                         fromRect:outputImage.extent]];

    [inputImage release];
}

Result of CIHighlightShadowAdjust filter looks like this:

image10.png

Download the improved TalkingApp iOS Project Source Code PAGE TOP

We created an improved project of what we covered above adding a cool UI and features like:

  • Load image from gallery
  • shot a new image
  • apply filter
  • save image to gallery
  • share info on social networks

492_768_preview2.png

Click Here to Download the Project.

2 Comments Leave a comment

Please login in order to leave a comment.

Newest first
  • bowlslaw 2013-11-12 13:16:18

    app opens, can take a shot or load, but Apply Fx does NOT work NO FX filters appear

  • Deleted user 2012-05-21 10:09:27

    Amazing! I was looking for it. Thank you.

!