Place Image on larger canvas size using GPU (possibly CIFilters) without using Image Context

Question

Let's say I have an Image that's 100x100. I want to place the image onto a larger canvas size that's 500x500.

My current approach is to use UIGraphics to create a Context, then draw the image onto the context.

UIGraphics.BeginImageContext(....);
ImageView.Draw (....);

That works great, but it's not as fast as I'd like it to be for what I'm doing. I noticed that CIFilters are extremely fast. Is there a way I can place an image on a larger canvas size using CIFilters, or another method that uses the GPU and not the CPU?? I've experimented with the CIFilters CICrop and CIPerspectiveTransform but I can't seem to get my desired result...

Original Image 100x100

My Desired result image at 500x500. I simply want to take the image and increase it's canvas size using CIFilters or some GPU operation.

I tried doing a "reverse crop" using CICrop, but that didn't work. Notice I specified the size of the CIVector to be 500x500 even though the image itself is 100x100, the result image totally ignored that extra space and cut if off. Here is my code:

        CICrop crop = new CICrop();
        crop.Image = ImageView.Image.CGImage;
        crop.Rectangle = new CIVector(0, 0, 500, 500);
        ImageView.Image = new UIImage(crop.OutputImage);
        Console.WriteLine("ImageView.Image.size = "+ ImageView.Image.Size);

Katey

Answer 1

A crop filter is not going to serve your purpose - you cannot scale the size of an input image with a crop filter. From Wikipedia: Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio.

What you need is a scale filter. To achieve this with CoreImage, you need to do something like this:

CIImage *input = [CIImage imageWithCGImage: ImageView.Image.CGImage]; // input image is 100 X 100
CGAffineTransform transform = CGAffineTransformMakeScale(5.0f, 5.0f); // Scale by 5 times along both dimensions
CIImage *output = [input imageByApplyingTransform: transform];
// output image is now 500 X 500

Lanneret

I do understand how crop works. I'm just trying to come up with a clever way of changing the canvas size of an image by using CIFilters, since CI Filters are so fast! Scale Wont' actually do what I'm trying to achieve. Scale will scale the entire image, I want the image itself to remain the same size/dimensions, but only the canvase to increase (aka add whitespace or blank space to the image..) Think of it as opening a 100x100 image in photoshop, then Changing the Canvas size to 500x500. – Katey

@Katey - I'm sorry, I think mis-understood your question! I think you can achieve what you're looking for with a source-over compositing filter (developer.apple.com/library/mac/#documentation/graphicsimaging/…). Source-Over filter background image = [CIImage imageWithColor:white]; input image = your 100X100 image; And chain this filter to a 500X500 crop filter. The output of the crop filter should be what you're looking for? – Lanneret

That sounds like it should work, but what I've been struggling with is how do I position the 100x100 image exactly where I want it? After the Source-Over filter the 100x100 image's locaiton is always X-0, Y-0. What if I want it to be X-50, Y-152? I can't seem to position it... Any ideas? And no worries on the misunderstanding! – Katey