On-the-Fly Image Overlays using Cloudinary

Image overlay isn’t solely about having the right touch to create an amazing visual. You also need a great tool that simplifies the process. Cloudinary, a cloud-based image and video service for websites and mobile applications, is exactly the tool you need.

How to Overlay Images

First open a free Cloudinary account, if you don’t already have one. Then upload images, either through the Cloudinary management console or using the API. Once an image is uploaded to your Cloudinary account it is stored on the cloud as well.

To create an overlay, you simply need to define how you would like to modify your original image within the image delivery URL. According to the directives added to the URL a new derived image is processed on the fly and cached. The result will be delivered super-fast via content delivery network (CDN). Any subsequent request to the same URL will be delivered from the cache.

Here we show how to put a company logo on a koala. With Cloudinary, this common task becomes an easy job. The koala original image URL is:

The overlay was created by adding the following parameters to the URL:

l_<overlay_public_id>

w_<width>

c_<crop_method>

Be sure to visit the image URLs shown in the examples here, and try them out.

Building the Image URL Using JavaScript

You can build the image URL yourself or use one of Cloudinary SDK libraries. In the following examples, I will use the core JavaScript library, which is pure Java Script, but there is a JQuery plugin, as well.

First you need to include the JavaScript source, which you can download from the cloudinary-core github project.

The parameters used in this call are the image public_id which is “koala,” the image overlay public_id, which is “cloudinary_icon.” For both, public_id means the name of the image in the Cloudinary media library. The next parameter is width = 200 pixels, which is used to resize the overlay image to be 200 pixel wide. The last parameter is crop which determines the crop mode used to resize the overlay image. The selected “scale” option resizes to the requested width while retaining the original aspect ratio. The result of this call is the “image overlay URL” as previously shown.

Creating Watermarks

A common and basic use case for image overlay is adding a watermark. It is a useful way to protect and copyright your images online. The image we started with already has our icon on it, but perhaps you prefer to add it in a subtler way, such as watermark. Here are the parameters required to do that:

Dimensions of the overlay is defined by width and crop sets the crop type.

Dynamic Text Overlays

Creating dynamic text overlays opens up a world of possibilities. You can easily update banners with the latest deals and promotions. Google fonts are supported by default, but you also can upload custom fonts to your account. For example, announcing on a special sale happening only today.

Personalized Text Overlays

Text overlays can be personalized, as well. You can replace the text on the fly in your code using information stored on a cookie, showing each user its own text based on the information gathered from previous site visits. To make sure the text will be seen on any background color it is effective use a border font.

Face Detection–based Overlay

In order to create a cool overlay, it is helpful to detect the face in the image, especially if you are planning to reenact the Venice mask carnival, as shown below. The overlay is automatically placed on the eyes that are detected in the image.

Image Overlay on Video

Cloudinary also supports video, so the same API enables you to have images, animated gifs and videos interact. You can create an animated gif from several images, capture an image from an animated gif or a video clip, and even overlay an image on a video clip for a defined period of time as shown below.

Summary

This is only the tip of the iceberg, Cloudinary supports a long list of image manipulation options which you can find hereand the same goes for video. In addition, images can be optimized for faster delivery by using features such as automatic format and automatic quality.
Now it is up to you, go ahead and improve your website visuals, as many studies have shown, the millennials prefer images to text anyhow.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Actually I was searching for the same thing on the web and somehow landed to the post that i was looking for, I got the related codes and information about the implementation. It would be really helpful. Thanks