Crop pictures by custom coordinates
Crop pictures by custom coordinates
Presentation
Cropping
Beginner

Crop your images by specifying the width and height parameters (w and h in URLs) while setting the crop parameter to crop (c_crop in URLs). This will extract only part of a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.

Here's an original image: Original

https://res.cloudinary.com/demo/image/upload/kitten.jpg

Here is a 150x150 images cropped from the center of the original: Center crop

https://res.cloudinary.com/demo/image/upload/w_300,h_250,c_crop/kitten.jpg

Cloudinary also supports custom/fixed coordinates cropping. Use this method when you know beforehand what the correct absolute cropping coordinates are. For example, this method is helpful when your users manually select the region to crop out of the original image. Many Javascript libraries (such as Jcrop) support client-side cropping region selection. Simply send the coordinates to Cloudinary and get the desired cropped image.

Custom coordinates cropping is applied by setting the x and y of the corner with the width and height of the requested result: By Coordinates

https://res.cloudinary.com/demo/image/upload/x_385,y_90,w_300,h_250,c_crop/kitten.jpg

See this blog post for more information: Cloudinary as the server-side for Javascript image cropping libraries.