how to crop an image not from center?

Question

I'm working on an app where I'm cropping an image.

Currently, this is how I crop it:

mainPicture.layer.cornerRadius = mainPicture.frame.size.width / 2
mainPicture.clipsToBounds = true

The request is not to crop it from the middle but rather to crop it in a specific radius and 12 px from the top.

I start with a normal image:

and when I currently crop it just gets cropped from the middle, so the result is like this:

The request is to crop it so that the top part of the circle will be 12 px from the top:

So that the final image would look like this:

How can this be done using Swift 4.0?

I am a little confused. You said that you want to crop the image, but you're setting it's corner radius? — Jacob Cavin, Jan 10 '19 at 15:16
@JacobCavin i'm cropping a perfact circle at the moment from the middle, what i WANT to achieve, is cropping in a spcific place in a spcific spot of the picture like in the diagram\ — Chief Madog, Jan 10 '19 at 15:17
Alright. Corner radius may not be the way to go with this. Have you tried drawing or using a mask instead? Check out this question: https://stackoverflow.com/questions/44611878/whats-currently-the-correct-way-to-set-a-uiviews-corner-radius — Jacob Cavin, Jan 10 '19 at 15:21
yea again i need it to be cropped from a very specific place. i can change the way i crop it , if you have an example please write it as answer — Chief Madog, Jan 10 '19 at 15:25

score 3 · Answer 1 · answered Jan 13 '19 at 15:21

3

Here what you need to do is first crop the original image into a square image from top with the margin you want (like 20) and then set image to your Image view.

Here's a extension you can write on UIImage class for cropping:

extension UIImage {
    func getCroppedImage(with topMargin: CGFloat) -> UIImage? {
        let heightWidth = size.height < size.width ? size.height : size.width
        let x = (size.width - heightWidth)/2
        let rect = CGRect(x: x, y: topMargin, width: heightWidth, height: heightWidth)
        if let imageRef = cgImage?.cropping(to: rect) {
            return UIImage(cgImage: imageRef)
        }
        return nil
    }
}

Then before setting the image to UIImageView call this method for your Image like:

let image = UIImage(named: "test")
imageView.image = image?.getCroppedImage(with: 20)

Output:

This is the input image:

This is the Output:

answered Jan 13 '19 at 15:21

Mukesh

2,792
15
32

wait ... voted for it too early... it doesn't crop the image into a circle... actually it doesn't crop the image at all – Chief Madog Jan 16 '19 at 10:46
@ChiefMadog It crops image in a square (starting from top) and then you need to set the corner radius for circle. – Mukesh Jan 16 '19 at 10:51
but it cuts it on the side in a wierd way it doesn't cut it at all what i mean or as in your example – Chief Madog Jan 16 '19 at 10:54
It will try to fit the image vertically, so if the image is in portrait mode it will fit it into square so horizontally aligning it in center. – Mukesh Jan 16 '19 at 11:01
If you don't want to cut the image horizontally i can update the code. – Mukesh Jan 16 '19 at 11:02
if you can update the code it would be nice, i want to just do a circle with width as much as the picture width, and that the top part of it will be 20px from top of view, like in the question i asked – Chief Madog Jan 16 '19 at 11:16
What if the image is in landscape mode? can you add the result of weird behavior you're talking about? – Mukesh Jan 16 '19 at 11:17
yea let's take it to chat – Chief Madog Jan 16 '19 at 13:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186791/discussion-between-chief-madog-and-mukesh). – Chief Madog Jan 16 '19 at 13:46
i answered u in the chat – Chief Madog Jan 16 '19 at 20:34

score 2 · Accepted Answer · answered Jan 16 '19 at 20:54

fixed it by cropping the image prior to posting it using this function:

func cropToBounds(image: UIImage, width: CGFloat, height: CGFloat) -> UIImage {

        let cgimage = image.cgImage!
        let contextImage: UIImage = UIImage(cgImage: cgimage)
        let contextSize: CGSize = contextImage.size
        var posX: CGFloat = 0.0
        var posY: CGFloat = 0.0
        var cgwidth: CGFloat = width
        var cgheight: CGFloat = height

        // See what size is longer and create the center off of that
        if contextSize.width > contextSize.height {
            posX = ((contextSize.width - contextSize.height) / 2)
            posY = 0
            cgwidth = contextSize.height
            cgheight = contextSize.height
        } else {
            posX = 0
            posY = (( contextSize.width - contextSize.height) / 2)
            cgwidth = contextSize.width
            cgheight = contextSize.width
        }

        let rect: CGRect = CGRect(x: posX, y: posY, width: cgwidth, height: cgheight)

        // Create bitmap image from context using the rect
        let imageRef: CGImage = cgimage.cropping(to: rect)!

        // Create a new image based on the imageRef and rotate back to the original orientation
        let image: UIImage = UIImage(cgImage: imageRef, scale: image.scale, orientation: image.imageOrientation)

        return image
    }

how to crop an image not from center?

2 Answers2