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

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more