Recipe

The CoreImage framework introduced with iOS 5 provides a number of different filters that can be applied to images. This recipe shows how to implement the CIColorControls filter with Xamarin.iOS.

To implement the CIColorControls Core Image filter:

• Make sure your code file references CoreImage and CoreGraphics namespaces:

using MonoTouch.CoreImage;
using MonoTouch.CoreGraphics;

• Add an image view and load an image (ensure the image has been added to your project with Build Action: Content):

imageView = new UIImageView(new RectangleF(10, 190, 300, 200));
sourceImage = UIImage.FromFile ("clouds.jpg");
imageView.Image = sourceImage;
View.Add (imageView);

• Add three sliders that will change the value of the brightness, saturation and contrast parameters:

sliderBrightness = new UISlider(new RectangleF(100,  70, 210, 20));
sliderSaturation = new UISlider(new RectangleF(100, 110, 210, 20));
sliderContrast = new UISlider(new RectangleF(100, 150, 210, 20));
View.Add (sliderContrast);
View.Add (sliderSaturation);
View.Add (sliderBrightness);

• Set the minimum and maximum values for the sliders based on the CIColorControls filter documentation :

sliderSaturation.MinValue = 0;
sliderSaturation.MaxValue = 2;
sliderBrightness.MinValue = -1;
sliderBrightness.MaxValue = 1;
sliderContrast.MinValue = 0;
sliderContrast.MaxValue = 4;

// set default values
sliderSaturation.Value = 1;
sliderBrightness.Value = 0;
sliderContrast.Value = 1;

• Attach a handler to each slider so that the image can be updated when the sliders are changed:

sliderContrast.TouchUpInside += HandleValueChanged;
sliderSaturation.TouchUpInside += HandleValueChanged;
sliderBrightness.TouchUpInside += HandleValueChanged;

• Implement the HandleValueChanged method to adjust the colors of the image and assign the output to the UIImageView:

void HandleValueChanged (object sender, EventArgs e)
{
    if (colorCtrls == null)
        colorCtrls = new CIColorControls () {
            Image = CIImage.FromCGImage (image.CGImage),
        };
    // set the values
    colorCtrls.Brightness = sliderBrightness.Value; 
    colorCtrls.Saturation = sliderSaturation.Value; 
    colorCtrls.Contrast = sliderContrast.Value;
    // do the transformation
    var output = colorCtrls.OutputImage;
    var context = CIContext.FromOptions (null);
    var result = context.CreateCGImage (output, output.Extent);
    // display the result in the UIImageView
    imageView.Image = UIImage.FromImage(result);
}

Additional Information

The transformed image can be saved to the photo album by adding this code to the end of HandleValueChanged:

var someImage = imageView.Image;
someImage.SaveToPhotosAlbum((image, error) => {
    // Called on completion...
    //new UIAlertView("Saved", "Photo saved to Camera Roll", null, "OK", null).Show ();
    Console.WriteLine("CIColorControls image saved to Photos");
});

The Adjust Image Pro sample includes additional code to take an image with the camera, resize it for manipulation then save the original size with the color changes applied.