Absolute artifacts when using easy blending mode

Question

I am mixing two images in my iPhone application using the HardLight blending mode of the top image. It looks something like this:

UIGraphicsBeginImageContext(size); [sourceImage drawInRect:rectangle blendMode:kCGBlendModeNormal alpha:1.0]; [effectOverlay drawInRect:rectangle blendMode:kCGBlendModeHardLight alpha:0.75]; mainImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

It works great. However, the blown glare in the image appears with a strange color artifact. Note the purple artifact in the lower right corner of this photo:

http://dl.dropbox.com/u/626891/artifact.jpg http://dl.dropbox.com/u/626891/artifact.jpg

This only happens when using Hard Light; other blending modes are great. Does anyone know what to do with this?

Answer 1

This problem is quite annoying. Has anyone filed a bug report at Apple?

However, this is another workaround that works better to solve the problem more reliably than the adhoc tricks I see here (which doesn't work for me). It is useful to know that the HardLight blending mode is the same as Overlay, only when switching two arguments. And the fact is that the implementation of Overlay iOS does not match not . So you need to navigate the drawing (and possibly take an intermediate shot using UIGraphicsGetImageFromCurrentImageContext or the like) so that you draw two images in the switching order. That way you can use Overlay instead of HardLight.

So, for your example, change the code to:

  UIGraphicsBeginImageContext(size); [effectOverlay drawInRect:rectangle blendMode:kCGBlendModeNormal alpha:0.75]; [sourceImage drawInRect:rectangle blendMode:kCGBlendModeOverlay alpha:1.0]; mainImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

Hope this helps.

Answer 2

I get similar artifacts with kCGBlendModeColor. I do not think this is a color problem. It seems like iOS doesn't clamp at 255 when calculating the pixel value. Definitely a bug in the OS. It's sad because it looks like 101 image processing.

Answer 3

I was able to confirm that this is most likely a color space problem. I use an application called “Opacity” to visually create shapes, blend effects, shadows, etc. And export the results to Core Graphics code. I happened to use the Hard Light blending mode, but in Opacity everything seemed just fine. However, when I exported and ran the code in iOS, I got the same artifacts.

This is not a solution for sure, but in my case I just masked and filled in a solid color, mixing with the image above it (Hard Light). I noticed that these artifacts occurred only with fill colors, the brightness of which was 100% . Setting the brightness to 99% solved my problem. However, for mixing images, etc., I think you have to play with color spaces.

I could be wrong. Of course, I am not a specialist in color.

Answer 4

Found a solution / workaround ...

Just view your image and change any pixel that is 255 255,255 to 254,254,254 and you will not see artifacts.

Just worked for me.

To be clear, in my case, I have a context that has a tinted image, and a CGImage that contains the color that I want to change using CGDrawImage with kCGBlendModeColor. I just make a temporary image out of context, look at each pixel, looking for 255, 255, 255, and change these pixels to 254, 254, 254. Then I put that image back in context and draw a hue image using kCGBlendModeColor and all this is good.

Hope this helps.

Answer 5

I had the same problem with kCGBlendModeNormal. I had a method that superimposed two images with a specific alpha and a specific blending mode:

 - (UIImage *)overlayImage:(UIImage *)image withBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha { CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height); UIGraphicsBeginImageContext(self.size); CGContextSetInterpolationQuality(UIGraphicsGetCurrentContext(), kCGInterpolationHigh); [self drawInRect:rect blendMode:kCGBlendModeNormal alpha:0.99]; [image drawInRect:rect blendMode:blendMode alpha:alpha * 0.99]; UIImage *result = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return result; } 

Using max.99 for alpha ensures that I don't have a pixel with 255, 255, 255. Hope this helps