Image Cropping in Processing
This article provides a Processing sketch that performs image cropping. In addition, you may find a thorough explanation related to aspect ratio, resolution, and image digital signal processing.
Image cropping is an important technique when working with digital media applications. Very often, it is necessary to prepare visual content for a number of different screens and devices, so the correct format has to be adjusted accordingly. As you may see in the following picture, there are a lot of screen formats and resolutions that you need to take care of many times.
The most important thing that we have to understand here, is that when we are dealing with different screen sizes, the original image might be distorted due to resizing that usually takes place when the image is transferred to a the new medium/screen/device. For example, if there is an image prepared to be viewed in standard resolution (SD), its size will be 720 pixels for the width and 480 pixels for the height of the screen (720×480). This size has an aspect ratio of 1.5 – aspect ratio refers to the ratio of the screen dimensions, and to find out how much this is, we can divide the width by the height. If this SD image is transferred to a high-definition (HD) screen or to a device that has a resolution of 1280×720 pixels, the aspect ratio of the image will have to change to 1.7 instead of 1.5. You might think that this 0.2 difference is not that a big deal, however, if we contrast this difference visually, we will notice that there is actually a very big distortion (see image below).
Left circles: aspect ratio of 1.5, Right circles: aspect ratio of 1.7
For this reason, it is necessary to resize and crop the image appropriately so that it fits the screen perfectly, and also the size distortion is avoided. The image resize needs to take place in order to make sure that at least the width or the height of the original image fits perfectly the new screen – this resizing method has to be exactly the same for the width and the height. For example, if we need to double the height size of the image to fit the new screen, we also need to double the width size to avoid perspective distortion.
Always make sure that the transfer of an image to a new screen resolution is adjusted by using resizing and cropping. Cropping is applied to cut the edges from a resizing transformation that are unnecessary, or because we want to extract a specific part of the image, i.e. a thin bar image that displays just a specific object we would like to copy.
Following, you will find a code example written in Processing that performs cropping of an original image. The code could be applied to your projects and can be handy if you want to perform cropping in real time for large image datasets.
