objective-cmacosbordernsimagecifilter

How to create a border around an NSImage CIFilter ObjC


I'm trying to create a stoke border around a PNG with transparent background in an NSImage.

I originally tried duplicating the image and having a larger scale and then using CIFilter to make it white - this works great for shapes like circles and other solid shapes.

However i'll have shapes like the example image below:

Tree Image

With this Image it doesn't work well at all.

I'm thinking that maybe I can do something with CIEdge and CIMorphologyMaximum but i'm not sure if i'm thinking in a good direction - would appreciate some advise if anyone has come across a similar challenge.


Solution

  • Yes, CIMorphologyMaximum should be the way to go. Try this:

    import CoreImage.CIFilterBuiltins
    
    let ciImage = ...
    
    // Apply morphology maximum to "erode" image in all direction into transparent area.
    let filter = CIFilter.morphologyMaximum()
    filter.inputImage = ciImage
    filter.radius = 5 // border radius
    let eroded = filter.outputImage!
    
    // Turn all pixels of eroded image into desired border color.
    let colorized = CIBlendKernel.sourceAtop.apply(foreground: .white, background: eroded)!.cropped(to: eroded.extent)
    
    // Blend original image over eroded, colorized image.
    let imageWithBorder = ciImage.composited(over: colorized)
    

    And in Objective-C:

    CIImage* ciImage = ...;
    
    // Apply morphology maximum to "erode" image in all direction into transparent area.
    CIFilter* erodeFilter = [CIFilter filterWithName:@"CIMorphologyMaximum"];
    [erodeFilter setValue:ciImage forKey:kCIInputImageKey];
    [erodeFilter setValue:@5 forKey:kCIInputRadiusKey];
    CIImage* eroded = erodeFilter.outputImage;
    
    // Turn all pixels of eroded image into desired border color.
    CIImage* colorized = [[CIBlendKernel.sourceAtop applyWithForeground:[CIImage whiteImage] background:eroded] imageByCroppingToRect:eroded.extent];
    
    // Blend original image over eroded, colorized image.
    CIImage* imageWithBorder = [ciImage imageByCompositingOverImage:colorized];
    

    Keep in mind that the border will extend the image in all directions which might result in a negative origin in working space. For example, an image with extent [0, 0, 50, 50] will have an extent of [-5, -5, 60, 60] after applying a 5 pixel border.

    To compensate for that, you need to specify the extent of the resulting image when as the rect when rendering the image:

    [ciContext createCGImage:imageWithBorder fromRect:imageWithBorder.extent];
    

    Alternatively, you can move the image's origin to [0, 0] again after applying the border. But the resulting will still be larger than the input image, so keep that in mind.

    imageWithBorder = [imageWithBorder imageByApplyingTransform:CGAffineTransformMakeTranslation(-ciImage.extent.origin.x, -ciImage.extent.origin.y)];
    

    As for the border size: The inputRadius you set on the erosion filter is in pixels. That means that large images will get a smaller relative border compared to small images.

    To compensate for that, you can calculate the border radius as a percentile of the image size. This should create a uniform look among differently sized images. For instance:

    NSNumber* radius = @(MAX(ciImage.extent.size.width, ciImage.extent.size.height) * 0.05);