Cut image with 4 CGPoints

Question

I have a UIImage and want to cut it. I have 4 CGPoints for the edges. I tried to do it with a mask, but it only change the color to transparent. I need a complete new UIImage. Can someone help me? (in Objective-C)

Thanks!

[CGImageCreateWithImageInRect](https://developer.apple.com/library//mac/documentation/GraphicsImaging/Reference/CGImage/index.html#//apple_ref/c/func/CGImageCreateWithImageInRect) is your friend. — Codo, Aug 12 '16 at 12:06
Do the four points form a rectangle or a non-rectangular shape? — Codo, Aug 12 '16 at 12:08
As images are always rectangular in iOS, how do you expect the final image to be? The same size as the original image but with transparent areas outside the crop/clip boundary? A minimal rectangular size to fit the cropped/clipped image with transparent areas outside the clip boundary? — Codo, Aug 12 '16 at 12:29
Check out this post http://stackoverflow.com/questions/8308802/ios-uiimage-clip-to-paths. You can create a `bezierPath` from your 4 points and then clip the image using the `bezierPath`. — RPK, Aug 12 '16 at 12:52
@RPK Thats nice but it returns a transparent image. I want to cut he transparent part away — Lothar, Aug 12 '16 at 12:57

score 0 · Answer 1 · answered Aug 12 '16 at 12:57

0

Use some code like this. originalImage is the image and p0, p1, p2 and p3 are the CGPoints as input. clippedImage is the resulting image:

// Create clipping path
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:p0];
[path addLineToPoint:p1];
[path addLineToPoint:p2];
[path addLineToPoint:p3];
[path closePath];

// Get boundary rectangle
CGRect rect = path.bounds;

// Create graphis context with translation and clipping
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1);
CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -rect.origin.x, -rect.origin.y)
[path addClip];

// draw image
[originalImage drawAtPoint:CGPointZero];

// create resulting image
UIImage *clippedImage = UIGraphicsGetImageFromCurrentImageContext();

// clean up
UIGraphicsEndImageContext();

I didn't test the code. So it could be that the translation and the clipping aren't setup in the right order or use the wrong sign.

answered Aug 12 '16 at 12:57

Codo

75,595
17
168
206

That works! But can you stretch the shorter side so a real rectangle image result? Like a scanner app? Now its transparent. – Lothar Aug 12 '16 at 13:05
That's why I've asked what the resulting image should look like. You should have told earlier. And you need to better describe what you really want. There can only be a "shorter side" if your four points aren't random but have some constraints, e.g. they form a trapezoid. If so, you need to describe this as well. – Codo Aug 12 '16 at 13:16
Yes sorry. I want it like a scanner app. For example ScanBot or TinyScan – Lothar Aug 12 '16 at 13:19
It's best if you ask a new question and precisely describe what you want. You probably want to add an illustration of the before and after situation to describe the required transformation. "Like scanner app" won't do it. – Codo Aug 12 '16 at 13:21
Ok I asked it http://stackoverflow.com/questions/38919301/crop-image-like-scanner-app – Lothar Aug 12 '16 at 13:35

Cut image with 4 CGPoints

1 Answers1