How to implement alpha gradient on a image?

Question

I want to implement alpha gradient on an image. From 0.5 alfa on top of the image to 0.0 on bottom. Any advice, tutorial, link is welcome.

Answer 1

You can use CGImageCreateWithMask to apply a masking image to it. You could generate an appropriate mask simply enough by drawing to a greyscale or alpha-only CGBitmapContext with CGContextDrawLinearGradient.

If it's being displayed as the content of a CALayer, you could apply an appropriate masking layer to the parent layer's mask property. You could use a CAGradientLayer with appropriate colors to create this mask.

You can draw the image to a CGBitmapContext, and then draw an appropriate alpha gradient over it using kCGBlendModeDestinationIn. Or draw the gradient first, and draw the image over it using kCGBlendModeSourceIn. In both cases, CGContextDrawLinearGradient is again your friend. Then, of course, get the image out of the CGContext using CGBitmapContextCreateImage or CGImageCreate on the underlying data buffer.

Or, of course, if you control the original image and never need a version without the alpha gradient, you could just store it as a PNG with the appropriate alpha values in the first place.

Answer 2

You can try CAGradientLayer.

UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

Another option

Try the answer suggested by @Caleb in this previous SO question

You can go for Graphics Contexts. All drawing happens in a graphics context. If you want to create an image that has a radial gradient, or a linear gradient, or anything else, you'll need to:

• Create a graphics context for your image with
  UIGraphicsBeginImageContextWithOptions.
• Do whatever drawing you want to appear in the image.
• Call UIGraphicsGetImageFromCurrentImageContext to get the image from the context.
  This gives you a UIImage, so no need to convert from a CGImage.
• Call UIGraphicsEndImageContext to clean up the context.

You can also have a look at Radial gradient on UImage

Answer 3

Create a new image by reading the pixels in the existing image (getting their RGBA) line by line adding them to the new image with the same RGB values but adjusting the alpha values on a per line basis.

Some other SO questions that should give you everything you'd need for that:

How to get pixel data from a UIImage (Cocoa Touch) or CGImage (Core Graphics)?

Can I edit the pixels of the UIImage's property CGImage

Answer 4

I found something here, it works great!

AlphaGradientView* gradient = [[AlphaGradientView alloc] initWithFrame:
                           CGRectMake(self.view.frame.size.width - 150, 0, 150, 
                                                self.view.frame.size.height)];

gradient.color = [UIColor yellowColor];
gradient.direction = GRADIENT_RIGHT;
[self.view addSubview:gradient];