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

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more