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. 

page load speed

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

Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more
Product Videos 101: What Makes Them Great?

A product’s benefits and usage, including its value proposition, features, and instructive details, are best demonstrated through video. Product-video types vary, depending on the funnel, channel, and audience, the most popular ones being demos, reviews, installation, and how-tos.

Read more