How to make one color transparent on a UIImage?

Question

On my iPhone app I have a UIImage instance. I want to get a derived a UIImage that is the result of the first UIImage where one of its colors (e.g. magenta) is made transparent. How can I do this?

Answer 1

I've never done anything like this myself, but it looks like CGImageCreateWithMaskingColors may be of use here. Using Core Graphics is beyond the scope of what I can explain in an answer on this site, though; take a look at your documentation and search for tutorials on the Web.

Answer 2

I'm actually trying that. This is my code:

    const float colorMasking[6] = {1.0, 1.0, 1.0, 1.0, 1.0, 1.0}; 
CGImageRef imageToMask = self.finalImage.CGImage;
CGImageRef imageWithMask = CGImageCreateWithMaskingColors(imageToMask, colorMasking);
self.canvasView.image = [UIImage imageWithCGImage:imageWithMask];
CGImageRelease(imageWithMask);

However it doesn't work. imageWithMask is alwas null. (I'm trying to make the white transparent)

Answer 3

Ok so I've been racking my brain trying to figuire this out to no avail. I looked at sample code here and it's pretty much doing exactly what I describe below.

For some full context: I have a UIView which I'm allowing users to paint using their finger.

First, I create a CGLayer using CGLayerCreateWithContext(context, self.frame.size, nil) Second, I respond to touch events and draw the appropriate paths in my CGLayer Third, I draw the entire CGLayer to my UIView Finally when I'm done I have both a UIView and a CGLayer that have the image I want (but I need the background to be transparent). So I create a UIImage using:

UIGraphicsBeginImageContext(drawingView.bounds.size);
[drawingView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Now that I have my image - I'm trying to make it transparent, but the following does not work:

const float colorMasking[6] = {255, 255, 255, 255, 255, 255}; 
CGImageRef imageToMask = originalImage.CGImage;
CGImageRef imageWithMask = CGImageCreateWithMaskingColors(imageToMask, colorMasking);
UIImage* newImage = [UIImage imageWithCGImage:imageWithMask];
CGImageRelease(imageWithMask);

imageWithMask is always null. What am I doing wrong here?

Answer 4

Does anyone think they could get this to work? I'm offering a 10 point bounty for it.... it may not seem like a lot but thats a huge portion of my current points.

Answer 5

-(void)changeColor
{
 UIImage *temp23=[UIImage imageNamed:@"leaf.png"];
 CGImageRef ref1=[self createMask:temp23];
 const float colorMasking[6] = {1.0, 2.0, 1.0, 1.0, 1.0, 1.0};
 CGImageRef New=CGImageCreateWithMaskingColors(ref1, colorMasking);
 UIImage *resultedimage=[UIImage imageWithCGImage:New];
}

-(CGImageRef)createMask:(UIImage*)temp
{
 CGImageRef ref=temp.CGImage;
 int mWidth=CGImageGetWidth(ref);
 int mHeight=CGImageGetHeight(ref);
 int count=mWidth*mHeight*4;
 void *bufferdata=malloc(count);

 CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
 CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
 CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;

 CGContextRef cgctx = CGBitmapContextCreate (bufferdata,mWidth,mHeight, 8,mWidth*4, colorSpaceRef, kCGImageAlphaPremultipliedFirst); 

 CGRect rect = {0,0,mWidth,mHeight};
 CGContextDrawImage(cgctx, rect, ref); 
 bufferdata = CGBitmapContextGetData (cgctx);

 CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, bufferdata, mWidth*mHeight*4, NULL);
 CGImageRef savedimageref = CGImageCreate(mWidth,mHeight, 8, 32, mWidth*4, colorSpaceRef, bitmapInfo,provider , NULL, NO, renderingIntent);
 CFRelease(colorSpaceRef);
 return savedimageref;
}

The above code is tested and i cahnge the green color to red color by using mask

Thanks

Answer 6

Thank you for good function.

But I could not get true result until I did not make this change: kCGImageAlphaPremultipliedFirst -> kCGImageAlphaPremultipliedLast

After that function gave me true result. :)

Thank you.

Answer 7

After used of yours function, I found more simpler way for making transparent background of UIImage :)

For example, you have PNG image with black background and you want make this background transparent on screen.

You can try this:

UIImage * image = [UIImage imageNamed:@"image.png"];

const float colorMasking[6] = {0.0, 0.0, 0.0, 0.0, 0.0, 0.0}; image = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(image.CGImage, colorMasking)];

You have got image with transparent background.

That's all :)

Answer 8

this function can work!

-(UIImage *)changeWhiteColorTransparent: (UIImage *)image{
CGImageRef rawImageRef=image.CGImage;

const float colorMasking[6] = {222, 255, 222, 255, 222, 255};

UIGraphicsBeginImageContext(image.size);
CGImageRef maskedImageRef=CGImageCreateWithMaskingColors(rawImageRef, colorMasking);
{
    //if in iphone
    CGContextTranslateCTM(UIGraphicsGetCurrentContext(), 0.0, image.size.height);
    CGContextScaleCTM(UIGraphicsGetCurrentContext(), 1.0, -1.0); 
}

CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, image.size.width, image.size.height), maskedImageRef);
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
CGImageRelease(maskedImageRef);
UIGraphicsEndImageContext();    
return result;

}

Answer 9

Hi, I am creating a color app and from this post, I gathered that maybe you can help me. I'm trying to create a color palette where the user can select a color from a color wheel and it changes the background of an image. The image is probably going to be a picture of a room and the background would basically be the walls of the room. I've been researching this but I have no idea of how to implement this. As of now, I'm leaning toward using image masks but I don't know enough about them to figure out if it would work or not. Can you please help me with this? Has anyone done this before? Is there another way to do this besides using image masks? Any help is appreciated. Thanks in advance.