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

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Complex Networks Case Study

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more