Image Crop / Rotate / Resize Handling in iOS

Crop, Rotate and Resize are the fundamental image operations. In app development we come to a situation when we have to do these operations. In this post, I will guide you how to use these operations in your iOS applications using XCode 8.0 and Swift 3.0.

Image Cropping:

Image cropping is a process of extracting some interested portion of an image. In this post we will create following method to crop an image:             

In this method image parameter is source image to be cropped and cropRect is a rectangle in which image will be cropped. This method will return UIImage object of cropped image.

First we will start from creating an image context for drawing environment

Here we passed the size of resulting image as first parameter, second parameter indicates that the image is not opaque and third parameter specifies the image scale.

Now we will create a point which will translate the source image according to the origin of given cropping rectangle.

Now we will draw the source image into current context at the translated point

Now we will get the resulted image, close the image context and return the resulting UIImage object.

So the final method for image cropping will be:

Image Rotation:

In image rotation we will use transformation matrix to rotate an image. In this example we will do three type of rotations: rotating an image by some degree(θ), flip the image vertically and flip the image horizontally. For these rotations we will use 3D rotation matrix.

To rotate an image by some degree(θ) we will rotate the image by θ degree w.r.t. Z-Axis. For vertical flip we will rotate the the image by 180 degree w.r.t. Y-Axis and for horizontal flip we will rotate the image by 180 degree w.r.t. X-Axis.

The 3D rotation matrix for rotation is following for different axises:

3d-rotation-matrix

 

 

 

 

 

 

Now we know that what will be our procedure to rotate and flip an image, So let’s start by defining a method for rotation.       

Here, image will be source image to be rotated, angle will be the rotation angle in radian, flipVertical will indicate whether the image will be flipped vertically or not by setting its value to 1 or 0 and flipHorizontal will indicate whether the image will be flipped horizontally or not by setting its value to 1 or 0. This method will return the UIImage object of rotated image.

To convert from degree to radian use following formula:

Now we will create a CIImage object of given source image and create a Affine Transform filter using CIFilter and set the CIImage object as input to the filter.  

By default Affine Transform rotate the image in anti-clockwise direction, so for clockwise rotation we have to multiply the angle by -1.

Now we will create a 3D identity transformation matrix.  

Apply rotation about Z-Axis by given angle:

Apply rotation about Y-Axis by radian (180 degrees) if flipVertical is 1.

Apply rotation about X-Axis by radian (180 degrees) if flipHorizontal is 1.

Now create an Affine transform object from above Transformation matrix and set it to the filter created earlier.    

Now get the rotated image and create a CIContext object for creating new image with extent of rotated image and convert it into UIImage and return. 

So the complete method for image rotation and flip will be following:

Image Resizing:

Resizing is very frequently used operation in mobile applications while uploading an image to application server. Due to high resolution camera available on mobile devices we resize the image before uploading them to our application server.

So let’s define a method for image resizing:           

Here, image is the source image to be resized and targetSize is a new size in which source image has to be resized. It returns an object of UIImage.

Calculate the width and height ratio of new image and derive a new size based on the minimum ratio and also make an rectangle using this new size.

Now we will create an image context for drawing environment
UIGraphicsBeginImageContextWithOptions(newSize, false, UIScreen.main.scale)
Here we passed the size of resulting image as first parameter, second parameter indicates that the image is not opaque and third parameter specifies the image scale.

Now we will draw the source image into the new rectangle

Now we will get the resulted image, close the image context and return the resulting UIImage object.

So the final method for Image resizing will be:

Leave a Reply