Anti-aliasing of clipped image - ios

I have been trying to experiment with clipping an image in a circular path. But, I can't seem to get the clipping path to be anti-aliased.
I have tried a few different things, but none seem to work. How do I get the clipped image to be anti-aliased?
UIImage*originalImage = [UIImage imageNamed:#"grandpa.png"];
int minWidth = originalImage.size.width;
bool isWidth = YES;
if(minWidth > originalImage.size.height){
minWidth = originalImage.size.height;
isWidth = NO;
}
UIBezierPath *path;
if(isWidth)
path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, (originalImage.size.height - minWidth)/2, minWidth, minWidth)];
else
path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake((originalImage.size.width - minWidth)/2, 0, minWidth, minWidth)];
UIGraphicsBeginImageContextWithOptions(originalImage.size, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetAllowsAntialiasing(context, true);
CGContextSetShouldAntialias(context, true);
[path addClip];
[originalImage drawAtPoint:CGPointZero];
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//This is based on the full size image
CGRect imageRect = CGRectMake(0, 0, maskedImage.size.width + 2, maskedImage.size.height + 2);
UIGraphicsBeginImageContext(imageRect.size);
[maskedImage drawInRect:CGRectMake(1,1,maskedImage.size.width,maskedImage.size.height)];
maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

I had this problem and it took me several hours on google and debugging but I finally figured this one out.
Whats happening is when you set the maskedImage to your imageView.image there is some resizing going on which includes the rounded clipping (on the image) and the result comes out funky.
A small example would be if your imageView has a bounds of 100x100 and the maskedImage has a bounds of 300x300 then when the imageView.image sets the maskedImage there will be reduced resizing to fit the image. This reduced sizing wont updated the rounded clipping, so your result is what appears to be jagged edges. If before you add the rounded clipping you scale the maskedImage to a size close to the imageView then your rounded edges will look exactly how you want!

Related

UIBezierPath : Make image of drawing only

I am creating an image from free hand drawing using below code :
UIGraphicsBeginImageContext(self.bounds.size);
for (UIBezierPath *path in self.pathArray) {
[self.lineColor setStroke];
[path stroke];
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I want to take image of only black lines (drawing) not the entire view's. View is size of 300x300. But if my drawing is in 50x50 then I want to focus on that part only.
I tried with
UIGraphicsBeginImageContext(signPath.bounds.size);
signPath is UIBezierPath object. But with this I am getting blank image.
Any suggestions ?
ok I figured it out.
UIGraphicsBeginImageContext(signPath.bounds.size);
By this way I was creating image context's size only and origin was missing.
So I need to create image context with x and y (origins).
I have origin in UIBezierPath with size.
Code :
CGSize size = signPath.bounds.size;
size = CGSizeMake(size.width + 10, size.height + 10);
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextConcatCTM(c, CGAffineTransformMakeTranslation(-signPath.bounds.origin.x + 5, -signPath.bounds.origin.y + 5));
[self.layer renderInContext:c];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I have given static values for some padding (given some space) while creating the image.
Not sure if this is the standard way, but it solved my problem and I am able to create image of hand drawing in a 500x500 view.
Now I am getting image of the my free hand drawing (Strokes) not for the entire view.

How to draw circle on UIImageView without adding layer in objective-c?

I want to draw a circle on UIImageView. I have tried it but it didn't work.
This is a example image of what i want to achieve:
The circle should be drawn on where user taps on UIImageView and I want to do it without adding any sublayer.
Is it some way to do this?
so far i have used this code from the internet but it didn't worked.
- (UIImage *)imageByDrawingCircleOnImage:(UIImage *)image
pointX:(float) x
PointY:(float) y
{
// begin a graphics context of sufficient size
UIGraphicsBeginImageContext(image.size);
// draw original image into the context
[image drawAtPoint:CGPointZero];
// get the context for CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// set stroking color and draw circle
[[UIColor redColor] setStroke];
// make circle rect 5 px from border
CGRect circleRect = CGRectMake(0, 0,
image.size.width,
image.size.height);
circleRect = CGRectInset(circleRect, x, y);
// draw circle
CGContextStrokeEllipseInRect(ctx, circleRect);
// make image out of bitmap context
UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
// free the context
UIGraphicsEndImageContext();
return retImage;
}
Suppose your object's view is square, Set the cornerRadius to half of the width or height.
maskToBounds set your image as per shape of rounded imageView
For example,add this code for your requirement,
yourImageView.layer.cornerRadius = yourImageView.imageView.frame.size.height /2;
yourImageView.layer.masksToBounds = YES;
Hope this will help you :)

Low quality UIImage after clipping it to a circle

I am trying to clip a UIImage to make it circular, I am starting with a 140*140px image and then running this code:
//round the image
UIImageView *roundView = [[UIImageView alloc] initWithImage:smallImage];
UIGraphicsBeginImageContextWithOptions(roundView.bounds.size, NO, 1.0);
[[UIBezierPath bezierPathWithRoundedRect:roundView.bounds
cornerRadius:roundView.frame.size.width/2] addClip];
[smallImage drawInRect:roundView.bounds];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
smallImage = finalImage;
//end round image
This works as desired but the quality is very low, the image looks fuzzy and the edges around the circle are jagged. I want to achieve them same affect as:
image.layer.cornerRadius = self.thumbnailView.frame.size.width / 2;
image.clipsToBounds = YES;
Not sure why the quality of the image is so low. Can someone give me some pointers please?
You might want to keep scale at 0.f, so it matches the device scale (retina / not retina).
UIGraphicsBeginImageContextWithOptions(roundView.bounds.size, NO, 0.f);
You can do also draw a circle like this:
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.f);
CGRect interiorBox = CGRectInset(rect, 0.f, 0.f);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:insideBox];
[bezierPath addClip];
[image drawInRect:rect];
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
You are passing the wrong scale in to UIGraphicsBeginImageContextWithOptions. You are passing 1. Use UIGraphicsBeginImageContextWithOptions(roundView.bounds.size, NO, [UIScreen mainScreen].scale);
Are you sure you actually need to do this to the actual image? Would it not be enough to just make the image view rounded?
You can do this very easily.
UIImageView *imageView = // your image view with the image
imageView.frame = CGRectMake(0, 0, 140, 140); // the size you want
imageView.clipsToBounds = YES;
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.layer.cornerRadius = 70; // make the corner radius half of the size
This will display your image cropped into a circle by the image view.
The image remains the same. It is just the display of the image that is rounded.
It's much less expensive too (time and memory).
Doing this in a table will not slow it down. You only need to do this once for each of the dequeued cells. For reused cells you do not need to do this as it is done when the cell is first created.

ios - Cropping image with feathered edges

I want to crop an image with feathered circle. I use this to crop an image but it is only cropped square.
CGImageRef imref = CGImageCreateWithImageInRect([newImage CGImage], faceRect);
newSubImage = [UIImage imageWithCGImage:imref];
What I want is to crop with feather edges? What should I use to achieve it?
This snippet will create a circular cut with feathered edges
The first featherLocations variable is likely the only one you'll need to adjust
- (UIImage *) featheredImageWithImage:(UIImage *) image
{
// Locations of where the feather starts and ends (0 -> 1)
const CGFloat featherLocations[] = {0.9, 1};
UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
CGContextRef ctx = UIGraphicsGetCurrentContext();
// Draw the original image
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
// A 'knock-out' gradient is used to generate a feather effect,
// the alpha channel on the colors defines the alpha of the drawn image
NSArray *gradientColors = #[(id)[UIColor colorWithWhite:0 alpha:1].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor];
CGGradientRef gradient = CGGradientCreateWithColors(CGImageGetColorSpace(image.CGImage), (__bridge CFArrayRef)gradientColors, featherLocations);
// Because we're changing the draw mode below,
// take a snapshot of the current draw settings so we can reset them after
CGContextSaveGState(ctx);
// The kCGBlendModeDestinationIn blend mode will provide a'knock-out' effect on
// the previously drawn content, using the alpha channels of the gradient's colors
CGContextSetBlendMode(ctx, kCGBlendModeDestinationIn);
const CGPoint gradientCenter = CGPointMake(image.size.width / 2, image.size.height / 2);
// The gradient will start at the center (0) and extend to the closest edge (horizontal or vertical)
const CGFloat startRadius = 0;
const CGFloat endRadius = MIN(image.size.width,
image.size.height) / 2;
// Draw the gradient to eliminate the pixels we don't want
CGContextDrawRadialGradient(ctx, gradient, gradientCenter, startRadius, gradientCenter, endRadius, (kCGGradientDrawsAfterEndLocation));
CGGradientRelease(gradient);
gradient = NULL;
// Finally, restore state
// (note that in this example CGContextSaveGState and CGContextRestoreGState
// are optional because no further drawing happens after this point)
CGContextRestoreGState(ctx);
// Get the UIImage version
UIImage *featheredImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return featheredImage;
}
What about this... first round the image:
//round the image
UIImageView *roundView = [[UIImageView alloc] initWithImage:smallImage];
UIGraphicsBeginImageContextWithOptions(roundView.bounds.size, NO, [UIScreen mainScreen].scale);
[[UIBezierPath bezierPathWithRoundedRect:roundView.bounds
cornerRadius:roundView.frame.size.width/2] addClip];
[smallImage drawInRect:roundView.bounds];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
and then round it again but with a smaller circle and set the bezier path colour again to white but make it semi transparent by adjusting the alpha...

Crop a Portion of UIImage from Larger UIImage, and include non-image parts

I think I may have an odd request, however hopefully someone can help. I am using the well known UIScrollView + UIImageView to zoom into and out of an image, as well as pan. This works fine and dandy, but the current project we have needs to be able to crop the image, but also include the black bars on the sides if the image is smaller than the crop rectangle. See the images below.
We wish to capture everything inside of the blue box, including the white (which will be black, since opaque is set to YES).
This works great for images that are completely zoomed out (The white is just the UIImageView's extra space).
However the problem arises when we try to zoom into the image, and capture only that portion, plus the empty space.
This results in the following image
The problem we are seeing is we need to be able to create an image that is exactly what is in the Crop Rect, regardless if there is part of the image there or not. The other problem is we wish to have the ability to dynamically change the output resolution. The aspect ratio is 16:9, and for this example kMaxWidth = 1136 and kMaxHeight = 639, however in the future we may want to request a larger or smaller 16:9 resolution.
Below is the function I have so far:
- (UIImage *)createCroppedImageFromImage:(UIImage *)image {
CGSize newRect = CGSizeMake(kMaxWidth, kMaxHeight);
UIGraphicsBeginImageContextWithOptions(newRect, YES, 0.0);
// 0 is the edge of the screen, to help with zooming
CGFloat xDisplacement = ((abs(0 - imageView.frame.origin.x) * kMaxWidth) / (self.cropSize.width / self.scrollView.zoomScale) / self.scrollView.zoomScale);
CGFloat yDisplacement = ((abs(self.cropImageView.frame.origin.y - imageView.frame.origin.y) * kMaxHeight) / (self.cropSize.height / self.scrollView.zoomScale) / self.scrollView.zoomScale);
CGFloat newImageWidth = (self.image.size.width * kMaxWidth) / (self.cropSize.width / self.scrollView.zoomScale);
CGFloat newImageHeight = (self.image.size.height * kMaxHeight) / (self.cropSize.height / self.scrollView.zoomScale);
[image drawInRect:CGRectMake(xDisplacement, 0, newImageWidth, newImageHeight)];
UIImage *croppedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return croppedImage;
}
Any help would be greatly appreciated.
I ended up just taking a screenshot, and cropping that. It seems to work well enough.
- (UIImage *)cropImage {
CGRect cropRect = self.cropOverlay.cropRect;
UIGraphicsBeginImageContext(self.view.frame.size);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *fullScreenshot = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRef croppedImage = CGImageCreateWithImageInRect(fullScreenshot.CGImage, cropRect);
UIImage *crop = [[UIImage imageWithCGImage:croppedImage] resizedImage:self.outputSize interpolationQuality:kCGInterpolationHigh];
CGImageRelease(croppedImage);
return crop;
}
If using iOS 7, you would use drawViewHierarchyInRect:afterScreenUpdates:, instead of renderInContext:
I think the translated rect for the image view isn't calculated properly. Since UIImageView is the subview inside the UIScrollView, you should be able to calculate the visible rect by calling [scrollView convertRect:scrollView.bounds toView:imageView];. That will be the visible rect of your image view. All you need to now is crop it.
-(UIImage*)cropImage:(UIImage*)img inRect:(CGRect)rect{
CGImageRef cropped = CGImageCreateWithImageInRect(img.CGImage, rect);
UIImage *image = [UIImage imageWithCGImage:cropped];
CGImageRelease(cropped);
return image;
}
Edit: Yeah... I forgot to mention that cropping should be done in (0,1) coordinate space. I've modified the crop function for you, so it crops the image based on all parameters you provided, UIImageView inside UIScrollView and an image.
-(UIImage*)cropImage:(UIImage*)image inImageView:(UIImageView*)imageView scrollView:(UIScrollView*)scrollView{
// get visible rect from image scrollview
CGRect visibleRect = [scrollView convertRect:scrollView.bounds toView:imageView];
UIImage* rCroppedImage;
CALayer* maskLayer= [[CALayer alloc] init];
maskLayer.contents= (id)image.CGImage;
maskLayer.frame= CGRectMake(0, 0, visibleRect.size.width, visibleRect.size.height);
CGRect rect= CGRectMake(visibleRect.origin.x / image.size.width,
visibleRect.origin.y / image.size.height,
visibleRect.size.width / image.size.width,
visibleRect.size.height / image.size.height);
maskLayer.contentsRect= rect;
UIGraphicsBeginImageContext(visibleRect.size);
CGContextRef context= UIGraphicsGetCurrentContext();
[maskLayer renderInContext:context];
rCroppedImage= UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return rCroppedImage;
}

Resources