Cloudinary Blog

Cloudinary as the server-side for Javascript image cropping libraries

Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a thumbnail, and so forth. When cropping you'll need to specify an anchor, or gravity. The image crop can be anchored to the image's center, top, left, etc. The cropping can even be relative to faces detected in the image.

Occasionally, you will know the exact fixed coordinates required for the perfect crop. The most common example is when you offer your users to upload their profile pictures and allow them to manually and interactively crop the uploaded picture. This is usually done using a client-side Javascript cropping library that lets the user visually mark the rectangle to crop from the original picture.

There are many nice Javascript libraries for visual cropping to choose from. These libraries will not perform the actual cropping, but rather identify and send the user's selected absolute crop coordinates to your server for processing.

So while you already have a nice pick of client-side libraries to retrieve the crop coordinates, you still need to implement the cropping process itself, store the result and deliver it to your users. 

Instead, you can now use Cloudinary as your Cloud-based interactive image cropping and delivery service. Simply pass the user’s selected coordinates to Cloudinary and it will take care of the rest.

Here's an example of cropping an uploaded image to a 300x200 rectangle starting at the 355x410 pixels corner:

.../image/upload/x_355,y_410,w_300,h_200,c_crop/brown_sheep.jpg

SheepBrown sheep

Same example using Cloudinary’s Ruby on Rails integration GEM:

      <%= cl_image_tag("brown_sheep.jpg", 
                                      :width => 300, :height => 200,
                                      :x => 355, :y => 410, :crop => :crop) %>

You can also use the original crop coordinates to create thumbnails in different dimensions by chaining multiple transformations. The following example generates a 150x100 image with the cropped brown sheep:

.../x_355,y_410,w_300,h_200,c_crop/w_150,h_100,c_fill/brown_sheep.jpg

Same example in Ruby on Rails:

     <%= cl_image_tag(“brown_sheep.jpg”,
                                     :width => 150, :height => 100, :crop => :fill,
                                     :transformation => {
                                          :width => 300, :height => 200,
                                          :x => 355, :y => 410, :crop => :crop }) %>

Last but not least - if your website allows users to login using Facebook Connect, you probably also import the user's Facebook profile picture to be shown on your service. Many social websites also allow the users to manually crop their Facebook profile picture for just the perfect shot. Using Cloudinary and the above technique, you can retrieve and crop a Facebook profile picture in a single step, without a sweat. 

The following example crops a Facebook profile picture to a 130x140 image starting at 25x10:

.../image/facebook/w_130,h_140,c_crop,x_25,y_10/zuck.jpg

 

For more details on custom coordinates cropping and image transformations in general, see our documentation.

Don’t have a Cloudinary account? Sign up to our free plan and start cropping your images in the Cloud.

Recent Blog Posts

Techniques for Image Enhancement With Cloudinary

Indisputably, visual presentations of events, places, people, and even intangible things make deeper impressions and linger in our minds for longer than words or any other communication medium, hence the meteoric rise through the ages of transmitting ideas and promoting brands in the business sector through images. The recent discovery of the first image of a black hole has generated calls for techniques for enhancing digital images. Specifically, the clamor is for quality-oriented tweaks that would result in optimal display and increased visibility of slightly hidden yet important content.

Read more
Video Manipulations and Delivery for Angular Video Apps

On social media, videos posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.

Read more
Green Screen Queen: Dynamic Video Transparency Fit For Royalty

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Read more
Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Read more
Use a custom function in the image delivery pipeline

Cloudinary offers a wide array of image manipulations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.

Read more