CODEWITHSUNDEEP
iosobjective-ccore-image
frimoldi
frimoldi

Reputation: 69

Add solid color border with CIImage

I'm looking for a way to add a solid color border to an existent image with Core Image. I've found the filter list reference but there is no one to make it.

Upvotes: 5

Views: 2399

Answers (3)

FinalCutPlugins
FinalCutPlugins

Reputation: 1

This should be the easiest solution.

We use a CIRoundedRectangleStrokeGenerator to generate an image of the same size as the original image plus the border pixels around all sides. Then composite the main image over the outputImage from the CIRoundedRectangleStrokeGenerator.

CIFilter<CIRoundedRectangleStrokeGenerator> *border = [CIFilter roundedRectangleStrokeGeneratorFilter];
border.color = [CIColor colorWithRed:borderRedColor
                               green:borderGreenColor
                                blue:borderblueColor
                               alpha:borderAlpha];
border.extent = CGRectInset(image.extent, -borderSize, -borderSize);
border.radius = 0;
border.width = borderSize;
CIImage *imageWithBorder = [image imageByCompositingOverImage:border.outputImage];

"image" is the CIImage we want a border around. "borderRedColor", "borderGreenColor", "borderblueColor", "borderAlpha" is the color of the border. If need be, the frame border can be composited with gradients and whatnot before the main image is overlayed. "borderSize" is the width of the border in pixels.

"imageWithBorder" is the original image with the specified border around it. This will not color the background of the main image and leaves its pixels untouched.

Upvotes: 0

Vidit
Vidit

Reputation: 29

We need to have the CIImage extent or the CGRect in which we want to create the solid border. Than, We can draw a CIImage forming a solid line in the specified area, and repeat the steps for 3 more times for different positions to draw a complete solid rectangle. Following is the piece of code which will draw a straight solid line above the specified area. 

CIImage *overlay1 = [CIImage imageWithColor:[CIColor colorWithRed:255/255.f green:0/255.f blue:0/255.f alpha:1.00f]];
    overlay1 = [overlay1 imageByCroppingToRect:image.extent];
    overlay1 = [overlay1 imageByApplyingFilter:@"CIPerspectiveTransformWithExtent" withInputParameters:@{@"inputExtent":[CIVector vectorWithCGRect:image.extent],@"inputTopLeft":[CIVector vectorWithCGPoint:CGPointMake(topLeft.x - 5, topLeft.y + 5)],@"inputTopRight":[CIVector vectorWithCGPoint:CGPointMake(topRight.x + 5, topRight.y + 5)],@"inputBottomLeft":[CIVector vectorWithCGPoint:CGPointMake(topLeft.x - 5, topLeft.y )],@"inputBottomRight":[CIVector vectorWithCGPoint:CGPointMake(topRight.x + 5, topRight.y ) ]}];
    overlay = [ overlay1 imageByCompositingOverImage:overlay];

I have kept the width for 5 pixels. topLeft , topRight.... are the respective CGPoint for the position. For a complete rectangle you will also need bottomLeft and bottomRight.

Overlay is the original CIImage .

Upvotes: 2

jhabbott
jhabbott

Reputation: 19281

This isn't exactly what you asked about, but it might be better if you just want to display the image with a border (rather than actually drawing a border onto it)...

You can use CALayer to add borders (and rounded corners, shadows, etc.) to any UIView...

// imgView is an instance of UIImageView, but this works with any UIView
imgView.layer.borderWidth = 2.0f;
imgView.layer.borderColor = [[UIColor blackColor] CGColor];

You also need to #import <QuartzCore/QuartzCore.h> and link to the QuartzCore framework for this to work.

Upvotes: 1

Related Questions