Clip UIImage to UIBezierPath (not masking)

Question

I'm trying to clip a UIImage based on a given UIBezierPath, but the resulting image retains the original shape and size. I want the shape and size to resemble the path, i.e. the visible content of the new image.

Take a look at this following example:

The following is the code I am using to mask an image given a path:

func imageByApplyingClippingBezierPath(_ path: UIBezierPath) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(CGSize(
        width: size.width,
        height: size.height
    ), false, 0.0)
    let context = UIGraphicsGetCurrentContext()!
    context.saveGState()

    path.addClip()
    draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

    let newImage = UIGraphicsGetImageFromCurrentImageContext()!

    context.restoreGState()
    UIGraphicsEndImageContext()

    return newImage
}

One solution would be to crop the image after masking it, but ideally I want this to be done as simple and efficiently as possible in one go.

Any solution/ tips would be appreciated.

No, just go ahead and crop it. It's pretty simple, though, a single call to `CGImageCreateWithImageInRect`. — Rob, Nov 26 '16 at 05:28
Thank you for your comment @Rob, would you mind sharing a quick code snippet on how to implement this? — Aleksander, Nov 26 '16 at 05:29
No need for the coding sample Rob, I figured it out. Thanks for the pointer! — Aleksander, Nov 26 '16 at 07:11

score 7 · Accepted Answer · edited May 23 '17 at 12:24

Thanks to Rob I was able to implement a solution using the cropping(to:) method of CGImage.

This is a two step process where first I mask the image using the given path, and then crop the result using the bounds of the path.

The following is my final working source code for implementing a clipping UIBezierPath UIImage extension:

extension UIImage {

    func imageByApplyingClippingBezierPath(_ path: UIBezierPath) -> UIImage {
        // Mask image using path
        let maskedImage = imageByApplyingMaskingBezierPath(path)

        // Crop image to frame of path
        let croppedImage = UIImage(cgImage: maskedImage.cgImage!.cropping(to: path.bounds)!)
        return croppedImage
    }

    func imageByApplyingMaskingBezierPath(_ path: UIBezierPath) -> UIImage {
        // Define graphic context (canvas) to paint on
        UIGraphicsBeginImageContext(size)
        let context = UIGraphicsGetCurrentContext()!
        context.saveGState()

        // Set the clipping mask
        path.addClip()
        draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

        let maskedImage = UIGraphicsGetImageFromCurrentImageContext()!

        // Restore previous drawing context
        context.restoreGState()
        UIGraphicsEndImageContext()

        return maskedImage
    }

}

The objective c version below only shows the cropping part of your solution, any chance that we could have a full objective c version of all of your solution? @Aleksander I'd truly appreciate it. — Reza.Ab, Feb 04 '18 at 00:22

score 0 · Answer 2 · answered Nov 26 '16 at 07:33

I am using following in objective C, for cropping any image to non-transperant rect. check if its helpful

@implementation UIImage (cropTransperant)
- (UIImage *) CropimageByTrimmingTransparentPixels {
    int rows = self.size.height;
    int cols = self.size.width;
    int bytesPerRow = cols*sizeof(uint8_t);

    if ( rows < 2 || cols < 2 ) {
        return self;
    }


    uint8_t *bitmapData = calloc(rows*cols, sizeof(uint8_t));


    CGContextRef contextRef = CGBitmapContextCreate(bitmapData, cols, rows, 8, bytesPerRow, NULL, kCGImageAlphaOnly);


    CGImageRef cgImage = self.CGImage;
    CGRect rect = CGRectMake(0, 0, cols, rows);
    CGContextDrawImage(contextRef, rect, cgImage);

    //get all non-transparent pixels in every row and every column
    uint16_t *rowSum = calloc(rows, sizeof(uint16_t));
    uint16_t *colSum = calloc(cols, sizeof(uint16_t));

    //loop through all pixels
    for ( int row = 0; row < rows; row++) {
        for ( int col = 0; col < cols; col++)
        {
            if ( bitmapData[row*bytesPerRow + col] ) {  //when you get non transperant pixel
                rowSum[row]++;
                colSum[col]++;
            }
        }
    }

       UIEdgeInsets crop = UIEdgeInsetsMake(0, 0, 0, 0); //croprect, initialize with 0,0,0,

    for ( int i = 0; i<rows; i++ ) {        //get top
        if ( rowSum[i] > 0 ) {
            crop.top = i; break;
        }
    }

    for ( int i = rows; i >= 0; i-- ) {     //get bottom
        if ( rowSum[i] > 0 ) {
            crop.bottom = MAX(0, rows-i-1); break;
        }
    }

    for ( int i = 0; i<cols; i++ ) {        //get left
        if ( colSum[i] > 0 ) {
            crop.left = i; break;
        }
    }

    for ( int i = cols; i >= 0; i-- ) {     //get right
        if ( colSum[i] > 0 ) {
            crop.right = MAX(0, cols-i-1); break;
        }
    }

    free(bitmapData);
    free(colSum);
    free(rowSum);

    if ( crop.top == 0 && crop.bottom == 0 && crop.left == 0 && crop.right == 0 ) {

        return self;
    }
    else {

        rect.origin.x += crop.left;
        rect.origin.y += crop.top;
        rect.size.width -= crop.left + crop.right;
        rect.size.height -= crop.top + crop.bottom;

        //crop  image to calcualted rect
        CGImageRef newImage = CGImageCreateWithImageInRect(cgImage, rect);


        return [UIImage imageWithCGImage:newImage];
    }
}

@end

I haven't had a chance to test your code, but logically it seems to make sense. However, ideally I was looking for a simpler and more efficient solution. I don't know why it was down voted though, anyone care to explain? — Aleksander, Nov 26 '16 at 20:36

Clip UIImage to UIBezierPath (not masking)

2 Answers2

Linked