Stephen Johnson
Stephen Johnson

Reputation: 5121

Drawing a GPUImage over another one with multiply and alpha

I am trying to overlay one image on top of another image with an alpha and multiply blend using GPUImage. In Core Graphics here is what I was doing.

CGContextRef ctx = UIGraphicsGetCurrentContext();
UIImage* baseImage = ...;
UIImage* overImage = ...;
CGSize size = baseImage.size;

// Draw the base image
CGContextDrawImage(ctx, CGRectMake(0, 0, size.width, size.height), baseImage.CGImage);

//Draw the overlay
CGContextSetAlpha(ctx, .5);
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
CGContextDrawImage(ctx, CGRectMake(0, 0, size.width, size.height), overImage.CGImage);

When I try doing this same thing using GPUImage I can get either the multiply or the alpha to work but I can't get both of them to work. I feel like there is something with combining GPUImage filters that I don't understand. Here is one of many different attempts for what I was doing with GPUImage to get this to work. This version of the code is doing the multiply but not the alpha.

GPUImagePicture *pictureOverlay = [[GPUImagePicture alloc] initWithImage:overImage];
GPUImageOpacityFilter* opacityFilter = [[GPUImageOpacityFilter alloc] init];
opacityFilter.opacity = .5;

[pictureOverlay addTarget:opacityFilter];
[pictureOverlay processImage];


pictureOverlay = [[GPUImagePicture alloc] initWithImage:[opacityFilter imageFromCurrentlyProcessedOutput]];

GPUImagePicture *pictureBase = [[GPUImagePicture alloc] initWithImage:baseImage];
GPUImageMultiplyBlendFilter *filter = [[GPUImageMultiplyBlendFilter alloc] init];

[pictureBase addTarget:filter];
[pictureOverlay addTarget:filter];

UIImage* finalImage = [filter imageFromCurrentlyProcessedOutput];

Any help would be greatly appreciated.

Here is what the image looks like when I process just using Core Graphics.

CoreGraphics Drawn image

And here is what I get when I use GPUImage

GPUImage processed

Upvotes: 0

Views: 2513

Answers (1)

Barbara R
Barbara R

Reputation: 1057

Try the following, I'm currently working with GPUImage and I think the following could work for you :

GPUImagePicture *pictureBase = [[GPUImagePicture alloc] initWithImage:baseImage];
GPUImageMultiplyBlendFilter *filter = [[GPUImageMultiplyBlendFilter alloc] init];

[pictureBase addTarget:filter];
[pictureBase processImage];

GPUImagePicture *pictureOverlay = [[GPUImagePicture alloc] initWithImage:overImage];
GPUImageOpacityFilter* opacityFilter = [[GPUImageOpacityFilter alloc] init];
opacityFilter.opacity = .5;

[pictureOverlay addTarget:opacityFilter];
[opacityFilter addTarget:filter];
[pictureOverlay processImage];

 UIImage* finalImage = [filter imageFromCurrentlyProcessedOutput];

It works like a pipeline where results from one filter are the entry for the next one.

Upvotes: 1

Related Questions