Convert an NSImage to CIImage

I realize that Core Image makes working with programmable GPUs drastically easier than it would be otherwise, but some things about it aren't so obvious. Most importantly, how do you get a CIImage from an NSImage? I thought this would be easy, but there are a few gotchas.

First, we need to get an actual valid CIImage object. This is easy enough if the file is on disk because you can just do something like:

NSURL   * url   = [NSURL fileURLWithPath: @"myfile.jpg"];
CIImage * image = [CIImage imageWithContentsOfURL: url];

There is no step three.

But what if your NSImage object is not directly from a file on disk? There's the first gotcha. Neither the CIImage or NSImage have a method which converts to one from the other. Doh. CIImage does have an +imageWithCGImage method, but CGImage is not toll-free bridged with NSImage.

By the way, just so we don't get too lost, here's a recap of what we're dealing with:

CIImage: Core Image object. Fancy effects, GPU accelerated.
CGImage: Core Graphics (Quartz) data structure.
NSImage: Cocoa Image object.

Confused yet? You have every right to be.

All you need to know is my goal here is to take an NSImage object, convert it to a CIImage, then display it on screen. (For a more complete description of these frameworks, check out the Cocoa Graphics Framework post).

In Search of a Solution

I thought I had found a quick solution from Dan Wood, but it seems like something got lost in translation because NSImage has no method called -bitmap. Close, but not quite there.

CGImage does have a -initWithBitmapImageRep: method, but how do we get an NSBitmapImageRep? Blake Seely has a post on NSImage which describes that part of the forumla:

NSImage * image    = [self currentImage];
NSData  * tiffData = [image TIFFRepresentation];
NSBitmapImageRep * bitmap;
bitmap = [NSBitmapImageRep imageRepWithData:tiffData];

This puts us in the home stretch:

NSImage * image    = [self currentImage];
NSData  * tiffData = [image TIFFRepresentation];
NSBitmapImageRep * bitmap;
bitmap = [NSBitmapImageRep imageRepWithData:tiffData];

CIImage * ciImage = [[CIImage alloc] initWithBitmapImageRep:bitmap];

Now we have the CIImage, and we just have to display it, right? That's easy enough:

[ciImage drawAtPoint: NSMakePoint (0,0)
            fromRect: NSMakeRect  (0,0,128,128)
           operation: NSCompositeSourceOver
            fraction: 1.0];

Great! Except, one minor issue. CIImage has no concept of "flipped" as NSImage does. That means if you draw your CIImage into a flipped view, you get one of these:



Hmmmm. Fortunately, Andy Matuschak has the answer in his post on Polished Metal buttons. The answer, dear friend, is that you use a CIAffineTransform filter to flip the image before it's drawn in the view. So, a bit more code:

CIFilter *transform = [CIFilter filterWithName:@"CIAffineTransform"];
[transform setValue:ciImage forKey:@"inputImage"];

NSAffineTransform *affineTransform = [NSAffineTransform transform];
[affineTransform translateXBy:0 yBy:128];
[affineTransform scaleXBy:1 yBy:-1];
[transform setValue:affineTransform forKey:@"inputTransform"];

CIImage * result = [transform valueForKey:@"outputImage"];

The one minor catch here is that Cocoa automatically includes CIImage.h but not CIFilter.h, so you need to explictly include it at the top of the file:

#import <QuartzCore/CIFilter.h>

Final Solution

So when all is said and done, this is how you get an NSImage from an arbitrary source, convert it to a CIImage, flip it, then draw it into a view:

#import <QuartzCore/CIFilter.h>

// convert NSImage to bitmap
NSImage * myImage  = [self currentImage];
NSData  * tiffData = [myImage TIFFRepresentation];
NSBitmapImageRep * bitmap;
bitmap = [NSBitmapImageRep imageRepWithData:tiffData];

// create CIImage from bitmap
CIImage * ciImage = [[CIImage alloc] initWithBitmapImageRep:bitmap];

// create affine transform to flip CIImage
NSAffineTransform *affineTransform = [NSAffineTransform transform];
[affineTransform translateXBy:0 yBy:128];
[affineTransform scaleXBy:1 yBy:-1];

// create CIFilter with embedded affine transform
CIFilter *transform = [CIFilter filterWithName:@"CIAffineTransform"];
[transform setValue:ciImage forKey:@"inputImage"];
[transform setValue:affineTransform forKey:@"inputTransform"];

// get the new CIImage, flipped and ready to serve
CIImage * result = [transform valueForKey:@"outputImage"];

// draw to view
[result drawAtPoint: NSMakePoint ( 0,0 )
           fromRect: NSMakeRect  ( 0,0,128,128 )
          operation: NSCompositeSourceOver
           fraction: 1.0];

// cleanup
[ciImage release];

Here's our nice iTunes icon in full CIImage glory. What complete overkill for a ATI Radeon X1600.



It does seem like quite a bit of work, though it's still better than writing GPU code. That said, file bugs to make this simpler. By the way, if anybody knows an easier way to this in Tiger, feel free to speak up.

Comments Temporarily Disabled

I had to temporarily disable comments due to spam. I'll re-enable them soon.