使用遮罩从图像中裁剪字母

Question

我需要什么：

1) 从库或相机中选择图像

2) 书写和文本

3) 文本被图像裁剪！

下图可以更清楚地说明我到底需要什么。

即使我在 emoji me app 中使用框架进行了蒙版，我也知道图像的蒙版和裁剪。只是我需要知道如何根据动态文本裁剪图像。

请提出您的建议。

...
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) 用下面的代码写一张图片

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) 获取纹理图像后应用所需图像制作图像

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

这是一个 CoreAnimation 方法。您可以使用CATextLayer 用图像遮盖图层。代码更紧凑：

// 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];

这将产生以下结果：

你可以弄乱字体和大小。 CATextLayers 可以根据您设置的大小自动换行。您还可以在文本图层上设置文本对齐方式以满足您的需要。

注意：这里有一个警告。如果您需要将输出作为图像，这将不起作用，因为您无法在图层上使用 renderInContext: 渲染蒙版。此方法仅在您打算仅在视图中显示时才有效。输出图像将需要 CoreGraphics 方法。