7

I'd like to create a CoreImage filter chain, and to be able to control the "intensity" of each filter in the chain by compositing its individual effect with alpha, or opacity settings, but I am not seeing a way to composite with alpha or opacity in the docs.

I could jump out of Core image filter chain and composite with a core graphics context I guess.

Dan Loewenherz
  • 10,879
  • 7
  • 50
  • 81
OWolf
  • 5,012
  • 15
  • 58
  • 93

3 Answers3

26

The CIColorMatrix filter can be used to alter the alpha component of a CIImage, which you can then composite onto a background image:

CIImage *overlayImage = … // from file, CGImage etc
CIImage *backgroundImage = … // likewise

CGFloat alpha = 0.5;
CGFloat rgba[4] = {0.0, 0.0, 0.0, alpha};
CIFilter *colorMatrix = [CIFilter filterWithName:@"CIColorMatrix"];
[colorMatrix setDefaults];
[colorMatrix setValue:overlayImage forKey: kCIInputImageKey];
[colorMatrix setValue:[CIVector vectorWithValues:rgba count:4] forKey:@"inputAVector"];

CIFilter *composite = [CIFilter filterWithName:@"CISourceOverCompositing"];
[composite setDefaults];
[composite setValue:colorMatrix.outputImage forKey: kCIInputImageKey];
[composite setValue:backgroundImage forKey: kCIInputBackgroundImageKey];

UIImage *blendedImage = [UIImage imageWithCIImage:composite.outputImage];
mrwalker
  • 1,883
  • 21
  • 23
2

mrwalker provided a great answer that I converted to Swift.

Swift 5

let sourceImage: CIImage = ...

// This is where I get the overlayImage, and intensity is alpha, used later
guard let ciFilter = LUTBuilder.getCIFilter(from: filter.filter), let intensity = filter.intensity else { return CIImage() }
ciFilter.setValue(sourceImage.clampedToExtent(), forKey: kCIInputImageKey)

let overlayImage = ciFilter.outputImage!.cropped(to: sourceImage.extent)

let alpha = CGFloat(intensity)
let rgba = [0.0, 0.0, 0.0, alpha]

guard
    let colorMatrix = CIFilter(name: "CIColorMatrix"),
    let composite = CIFilter(name: "CISourceOverCompositing")
else { return CIImage() }

colorMatrix.setDefaults()
colorMatrix.setValue(overlayImage, forKey: kCIInputImageKey)
colorMatrix.setValue(CIVector(values: rgba, count: 4), forKey: "inputAVector")

composite.setDefaults()
composite.setValue(colorMatrix.outputImage, forKey: kCIInputImageKey)
composite.setValue(sourceImage, forKey: kCIInputBackgroundImageKey)

return composite.outputImage ?? CIImage()
Danylo Kurylo
  • 235
  • 2
  • 11
-4

Ended up doing it like this. Code from this answer: https://stackoverflow.com/a/3188761/1408546

UIImage *bottomImage = inputImage;
UIImage *image = filterOutput;
CGSize newSize = CGSizeMake(inputImage.size.width, inputImage.size.height);
UIGraphicsBeginImageContext( newSize );
[bottomImage drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:_opacity];
UIImage *blendedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Community
  • 1
  • 1
OWolf
  • 5,012
  • 15
  • 58
  • 93
  • 1
    If you switch between Core Image and Core Graphics, you move between using the GPU and CPU for drawing. There are performance costs of doing this. In general, if you stay on the GPU as much as possible (and minimize switching) you'll get better performance for these kinds of drawing/compositing tasks. – fattjake Dec 03 '20 at 18:26