CODEWITHSUNDEEP
iosswiftobjective-cuiimage
Ramkumar Paulraj
Ramkumar Paulraj

Reputation: 1943

How to crop UIImage on oval shape or circle shape?

Please give ideas for how to crop UIImage on oval shape or circle shape. Please share your ideas.

Upvotes: 41

Views: 51711

Answers (12)

jjrscott
jjrscott

Reputation: 1542

I have ported Chris Nelson's excellent answer to Swift 5.10:

func circularScaleAndCropImage(image:UIImage, frame:CGRect) throws -> UIImage {
    // This function returns a newImage, based on image, that has been:
    // - scaled to fit in (CGRect) rect
    // - and cropped within a circle of radius: rectWidth/2
    
    // Define potential errors to be thrown
    enum FunctionError: Error {
        case nilContext
        case nilImage
    }
    
    //Create the bitmap graphics context
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(frame.size.width, frame.size.height), false, 0.0)
    guard let context = UIGraphicsGetCurrentContext() else { throw FunctionError.nilContext }
    
    //Get the width and heights
    let imageWidth = image.size.width
    let imageHeight = image.size.height
    let rectWidth = frame.size.width
    let rectHeight = frame.size.height
    
    //Calculate the scale factor
    let scaleFactorX = rectWidth/imageWidth
    let scaleFactorY = rectHeight/imageHeight
    
    //Calculate the centre of the circle
    let imageCentreX = rectWidth/2
    let imageCentreY = rectHeight/2
    
    // Create and CLIP to a CIRCULAR Path
    // (This could be replaced with any closed path if you want a different shaped clip)
    let radius = rectWidth/2
    context.beginPath()
    context.addArc(center: CGPoint(x: imageCentreX, y: imageCentreY), radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: false)
    context.closePath()
    context.clip()
    
    //Set the SCALE factor for the graphics context
    //All future draw calls will be scaled by this factor
    context.scaleBy(x: scaleFactorX, y: scaleFactorY)
    
    // Draw the IMAGE
    let myRect:CGRect = CGRectMake(0, 0, imageWidth, imageHeight)
    image.draw(in: myRect)
    
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    guard let newImage else { throw FunctionError.nilImage }
    
    return newImage
}

Note that I haven't modified the logic in any way, just the bare minimum to keep the compiler happy.

Upvotes: 0

Hardik Thakkar
Hardik Thakkar

Reputation: 15951

To make a RoundShape Image

Step1: in .h file

@property (strong, nonatomic) IBOutlet UIImageView *songImage;

Step2: in .m file

- (void)viewDidLoad
{
    self.songImage.layer.cornerRadius = self.songImage.frame.size.width / 2;
    self.songImage.clipsToBounds = YES;
    
     //To give the Border and Border color of imageview

   self.songImage.layer.borderWidth = 1.0f;
   self.songImage.layer.borderColor = [UIColor colorWithRed:249/255.0f green:117/255.0f blue:44/255.0f alpha:1.0f].CGColor;

}

OR For Swift

cell.songImage.layer.cornerRadius = cell.songImage.frame.size.width / 2;
cell.songImage.clipsToBounds = true
                        
//To give the Border and Border color of imageview
cell.songImage.layer.borderWidth = 1.0
cell.songImage.layer.borderColor = UIColor(red: 50.0/255, green: 150.0/255, blue: 65.0/255, alpha: 1.0).CGColor

Upvotes: 4

Aditya Malviya
Aditya Malviya

Reputation: 2140

This should work, Try pasting below code in viewDidLoad().

self.myImage.layer.cornerRadius = self.myImage.frame.size.width / 2;
self.myImage.clipsToBounds = YES;

Upvotes: 0

Rakesh Bhatt
Rakesh Bhatt

Reputation: 4606

#import <QuartzCore/QuartzCore.h>

CALayer *imageLayer = YourImageview.layer;
        [imageLayer setCornerRadius:5];
        [imageLayer setBorderWidth:1];
        [imageLayer setMasksToBounds:YES];

by increasing radius it will become more round-able.

As long as the image is a square, you can get a perfect circle by taking half the width as the corner radius: 

[imageView.layer setCornerRadius:imageView.frame.size.width/2];

You also need to add

[imageView.layer setMasksToBounds:YES];

Swift 4.2

import QuartzCore

var imageLayer: CALayer? = YourImageview.layer
imageLayer?.cornerRadius = 5
imageLayer?.borderWidth = 1
imageLayer?.masksToBounds = true

Upvotes: 111

Mohammad Sadiq
Mohammad Sadiq

Reputation: 5241

To have imageView in oval shape is not difficult.

You can do the following

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:yourImageView.bounds];
CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
maskLayer.path = path.CGPath;
yourImageView.layer.mask = maskLayer;

If the rect passed to bezierPathWithOvalInRect is Square the image will be cropped to circle.

Swift Code 

let path = UIBezierPath(ovalIn: yourImageView.bounds)
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
yourImageView.layer.mask = maskLayer

Upvotes: 13

Jerome
Jerome

Reputation: 2152

SWIFT 3 answer comes from @Mohammad Sadiq

let path = UIBezierPath.init(ovalIn: workingImgaeView.bounds)
let maskLayer = CAShapeLayer(layer: layer)
maskLayer.path = path.cgPath
workingImgaeView.layer.mask = maskLayer

Upvotes: 0

pkc
pkc

Reputation: 8502

SWIFT

var vwImage = UIImageView(image: UIImage(named: "Btn_PinIt_Normal.png"))
vwImage.frame = CGRectMake(0, 0, 100, 100)
vwImage.layer.cornerRadius = vwImage.frame.size.width/2

Upvotes: 3

codeburn
codeburn

Reputation: 2004

If you only need a perfect circle, changing the shape of the UIImageView could help. Simply add the QuartzCore framework to your project and add these lines of code somewhere in the lifecycle before the imageView is displayed:

#import <QuartzCore/QuartzCore.h>
.
.
.

//to crop your UIImageView to show only a circle
yourImageView.layer.cornerRadius = yourImageView.frame.size.width/2;
yourImageView.clipsToBounds = YES;

Upvotes: 2

Chris Nelson
Chris Nelson

Reputation: 466

I started looking into this a couple of weeks back. I tried all the suggestions here, none of which worked well. In the great tradition of RTFM I went and read Apple's documentation on Quartz 2D Programming and came up with this. Please try it out and let me know how you go.

The code could be fairly easily altered to crop to an elipse, or any other shape defined by a path.

Make sure you include Quartz 2D in your project.

#include <math.h>

+ (UIImage*)circularScaleAndCropImage:(UIImage*)image frame:(CGRect)frame {
    // This function returns a newImage, based on image, that has been:
    // - scaled to fit in (CGRect) rect
    // - and cropped within a circle of radius: rectWidth/2

    //Create the bitmap graphics context
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(frame.size.width, frame.size.height), NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    //Get the width and heights
    CGFloat imageWidth = image.size.width;
    CGFloat imageHeight = image.size.height;
    CGFloat rectWidth = frame.size.width;
    CGFloat rectHeight = frame.size.height;

    //Calculate the scale factor
    CGFloat scaleFactorX = rectWidth/imageWidth;
    CGFloat scaleFactorY = rectHeight/imageHeight;

    //Calculate the centre of the circle
    CGFloat imageCentreX = rectWidth/2;
    CGFloat imageCentreY = rectHeight/2;

    // Create and CLIP to a CIRCULAR Path
    // (This could be replaced with any closed path if you want a different shaped clip)
    CGFloat radius = rectWidth/2;
    CGContextBeginPath (context);
    CGContextAddArc (context, imageCentreX, imageCentreY, radius, 0, 2*M_PI, 0);
    CGContextClosePath (context);
    CGContextClip (context);

    //Set the SCALE factor for the graphics context
    //All future draw calls will be scaled by this factor
    CGContextScaleCTM (context, scaleFactorX, scaleFactorY);    

    // Draw the IMAGE
    CGRect myRect = CGRectMake(0, 0, imageWidth, imageHeight);
    [image drawInRect:myRect];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

Include the following code in your UIView class replacing "monk2.png" with your own image name.

- (void)drawRect:(CGRect)rect {

    UIImage *originalImage = [UIImage imageNamed:[NSString stringWithFormat:@"monk2.png"]];
    CGFloat oImageWidth = originalImage.size.width;
    CGFloat oImageHeight = originalImage.size.height;
    // Draw the original image at the origin
    CGRect oRect = CGRectMake(0, 0, oImageWidth, oImageHeight);
    [originalImage drawInRect:oRect];

    // Set the newRect to half the size of the original image 
    CGRect newRect = CGRectMake(0, 0, oImageWidth/2, oImageHeight/2);
    UIImage *newImage = [self circularScaleAndCropImage:originalImage frame:newRect];

    CGFloat nImageWidth = newImage.size.width;
    CGFloat nImageHeight = newImage.size.height;

    //Draw the scaled and cropped image
    CGRect thisRect = CGRectMake(oImageWidth+10, 0, nImageWidth, nImageHeight);
    [newImage drawInRect:thisRect];

}

Upvotes: 36

Dilip Rajkumar
Dilip Rajkumar

Reputation: 7074

After a long search I found the correct way to circle the image

Download the Support archive file from URL http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/

#import "UIImage+RoundedCorner.h"
#import "UIImage+Resize.h"

Following lines used to resize the image and convert in to round with radius

UIImage *mask = [UIImage imageNamed:@"mask.jpg"];

mask = [mask resizedImage:CGSizeMake(47, 47) interpolationQuality:kCGInterpolationHigh ];
mask = [mask roundedCornerImage:23.5 borderSize:1];

Upvotes: 3

Maulik
Maulik

Reputation: 19418

you should refer This ...

// Create the image from a png file
UIImage *image = [UIImage imageNamed:@"prgBinary.jpg"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

// Get size of current image
CGSize size = [image size];

// Frame location in view to show original image
[imageView setFrame:CGRectMake(0, 0, size.width, size.height)];
[[self view] addSubview:imageView];
[imageView release];    

// Create rectangle that represents a cropped image  
// from the middle of the existing image
CGRect rect = CGRectMake(size.width / 4, size.height / 4 , 
(size.width / 2), (size.height / 2)); //oval logic goes here

// Create bitmap image from original image data,
// using rectangle to specify desired crop area
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *img = [UIImage imageWithCGImage:imageRef]; 
CGImageRelease(imageRef);

// Create and show the new image from bitmap data
imageView = [[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(0, 200, (size.width / 2), (size.height / 2))];
[[self view] addSubview:imageView];
[imageView release];

Upvotes: 0

EFC
EFC

Reputation: 1949

Check out CGImageCreateWithMask. Create a mask of your oval shape, then apply it to the image.

Upvotes: 0

Related Questions