Search code examples
iosobjective-ccalayermask

Cropping an image without using an image mask?

I'm trying to add a feature in my iPhone app that allows users to record the screen. To do this, I used an open source class called ScreenCaptureView that compiles a series of screenshots of the main view through the renderInContext: method. However, this method ignores masked CALayers, which is key to my app.

EDIT: I need a way to record the screen so that the masks are included. Although this question specifically asks for a way to create the illusion of an image mask, I'm open to any other modifications I can make to record the screen successfully.

APP DESCRIPTION

In the app, I take a picture and create the effect of a moving mouth by animating the position of the jaw region, as shown below.

enter image description here enter image description here

Currently, I have the entire face as one CALayer, and the chin region as a separate CALayer. To make the chin layer, I mask the chin region from the complete face using a CGPath. (This path is an irregular shape and must be dynamic).

enter image description here

- (CALayer *)getChinLayerFromPic:(UIImage *)pic frame:(CGRect)frame {


    CGMutablePathRef mPath = CGPathCreateMutable();
    CGPathMoveToPoint(mPath, NULL, p0.x, p0.y);
    CGPoint midpt = CGPointMake( (p2.x + p0.x)/2, (p2.y+ p0.y)/2);
    CGPoint c1 = CGPointMake(2*v1.x - midpt.x, 2*v1.y - midpt.y); //control points
    CGPoint c2 = CGPointMake(2*v2.x - midpt.x, 2*v2.y - midpt.y);

    CGPathAddQuadCurveToPoint(mPath, NULL, c1.x, c1.y, p2.x, p2.y);
    CGPathAddQuadCurveToPoint(mPath, NULL, c2.x, c2.y, p0.x, p0.y);

    CALayer *chin = [CALayer layer];
    CAShapeLayer *chinMask = [CAShapeLayer layer];
    chin.frame = frame;
    chin.contents = (id)[pic CGImageWithProperOrientation];
    chinMask.path = mPath;
    chin.mask = chinMask;
    CGPathRelease(mPath);
    return chin;

}

I then animate the chin layer with a path animation.

As mentioned before, the renderInContext: method ignores the mask, and returns an image of the entire face instead of just the chin. Is there any way I can create an illusion of masking the chin? I would like to use CALayers if possible, since it would be most convenient for animations. However, I'm open to any ideas, including other ways to capture the video. Thanks.

EDIT: I'm turning the cropped chin into a UIImage, and then setting that new image as the layers contents, instead of directly masking the layer. However, the cropped region is the reverse of the specified path.

 CALayer *chin = [CALayer layer];
 chin.frame = frame;   
 CGImageRef imageRef = [pic CGImage];
 CGColorSpaceRef colorSpaceInfo = CGImageGetColorSpace(imageRef);
 int targetWidth = frame.size.width;
 int targetHeight = frame.size.height;
 CGBitmapInfo bitmapInfo = CGImageGetBitmapInfo(imageRef);

 CGContextRef bitmap = CGBitmapContextCreate(NULL, targetWidth, targetHeight, CGImageGetBitsPerComponent(imageRef), CGImageGetBytesPerRow(imageRef), colorSpaceInfo, bitmapInfo);
    CGContextAddPath(bitmap, mPath);
    CGContextClip(bitmap);
    CGContextDrawImage(bitmap, CGRectMake(0, 0, targetWidth, targetHeight), imageRef);
    CGImageRef ref = CGBitmapContextCreateImage(bitmap);
    UIImage *chinPic = [UIImage imageWithCGImage:ref];
    chin.contents = (id)[chinPic CGImageWithProperOrientation];
Solution

  • Why don't you draw the CALayer of the chin into a seperate CGImage and make a new UIImage with that? Then you can add this CGImage to a seperate UIImageView, which you can just move around with a PanGestureRecognizer for example?