Crop letter from image using Masking - iphone

Question

What I need:
1) Choose image from library or camera
2) Write and text
3) Text is cropped with image!
Below image can clarify more on what exactly I need.
I know masking and cropping of image even I did masking with frame in emoji me app . Just I need to know how the image should be cropped according to dynamic text.
Please give your suggestions.
...
UIImage *image = [UIImage imageNamed:#"dogs.png"];
UIImage *mask = [UIImage imageNamed:#"mask.png"];
// result of the masking method
UIImage *maskedImage = [self maskImage:image withMask:mask];
...
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask);
UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef];
CGImageRelease(mask);
CGImageRelease(maskedImageRef);
// returns new image with mask applied
return maskedImage;
}

Answer 1

1) write a image with text with below code
UIImage *textedImage = [self imageFromText:#"Text to show"];
-(UIImage *)imageFromText:(NSString *)text
{
//set width for string to wrap.
CGSize maximumSize;
maximumSize = CGSizeMake(320, 300);
//set your text image font here
UIFont *font = [UIFont boldSystemFontOfSize:50];
CGSize strSize1 = [text sizeWithFont:font constrainedToSize:maximumSize lineBreakMode:UILineBreakModeWordWrap];
CGSize strSize =CGSizeMake(320, strSize1.height);
if (UIGraphicsBeginImageContextWithOptions != NULL)
UIGraphicsBeginImageContextWithOptions(strSize,NO,0.0);
else
UIGraphicsBeginImageContext(strSize);
//set your new text iamge frame here
CGRect newframe = CGRectMake(0, 0, 320, 400);
UIColor *color = [UIColor redColor];
[color set];
[text drawInRect:newframe
withFont:font
lineBreakMode:UILineBreakModeCharacterWrap
alignment:UITextAlignmentCenter];
UIImage *textImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return textImg;
}
2) after getting texture image apply image making with required image
UIImage *maskedImage = [self maskImage:finalImage withMask: textedImage];
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//UIImage *maskImage = [UIImage imageNamed:#"mask.png"];
CGImageRef maskImageRef = [maskImage CGImage];
// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
if (mainViewContentContext==NULL)
return NULL;
CGFloat ratio = 0;
ratio = maskImage.size.width/ image.size.width;
if(ratio * image.size.height < maskImage.size.height) {
ratio = maskImage.size.height/ image.size.height;
}
CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}};
CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
CGContextDrawImage(mainViewContentContext, rect2, image.CGImage);
// Create CGImageRef of the main view bitmap content, and then
// release that bitmap context
CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage *theImage = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
// return the image
return theImage;
}

Answer 2

Here is a CoreAnimation approach. You can use a CATextLayer to mask a layer with an image. It's a little more compact code wise:
// Create our text layer we want to use as a mask
CATextLayer *textLayer = [CATextLayer layer];
[textLayer setBounds:CGRectMake(0.0f, 0.0f, 300.0f, 300.0f)];
[textLayer setFont:#"Helvetica-Bold"];
[textLayer setFontSize:42.0f];
[textLayer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
[textLayer setPosition:CGPointMake(0.0f, 0.0f)];
[textLayer setWrapped:YES];
[textLayer setAlignmentMode:kCAAlignmentCenter];
[textLayer setString:#"Hello World And Something Something!!"];
// Create our image layer
CALayer *imageLayer = [CALayer layer];
[imageLayer setBounds:CGRectMake(0.0f, 0.0f, 300.0f, 300.0f)];
[imageLayer setPosition:[[self view] center]];
[imageLayer setContents:(id)[[UIImage imageNamed:#"pp"] CGImage]];
// Set the mask
[imageLayer setMask:textLayer];
// Add the layer to the view's layer tree
[[[self view] layer] addSublayer:imageLayer];
This will yield the following:
You can mess with the font face and size. CATextLayers can wrap automatically based on the size you set them to. You can also set the text alignment on the text layer to suite your needs.
NOTE: One caveat here. If you need the output as an image, this won't work because you can't render masks using renderInContext: on the layer. This method only works if you plan to just display it in a view. Outputting an image will require the CoreGraphics approach.