Crop letter from image using Masking

What I need:

1) Choose image from library or camera

  • Choosing units with MeasurementFormatter
  • How can Create Model class in swift and get values form model class in another class
  • UITextField's numerical pad: dot instead of comma for float values
  • Dailymotion embedded player on iOS devices (HTML5)
  • How can I check if a UILabel's value is more than 0 in an if statement?
  • ambiguous use of registerclass with Swift
  • 2) Write and text

    3) Text is cropped with image!

    Below image can clarify more on what exactly I need.

    enter image description here

    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;
    }
    

    2 Solutions Collect From Internet About “Crop letter from image using Masking”

    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;
    }
    

    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:

    enter image description here

    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.