Image Manipulation On-the-Fly with Cloudinary

Developers are increasingly utilizing visual assets in their web sites and mobile apps, which calls for robust storage, flexible image manipulation and optimized delivery. For example:

Social apps: automatically resize or crop images being sent in a group chat app
Business apps: change the format of uploaded images in an asset management platform
Retail: add effects or zoom to product images

As the app data is streamed via the network and the stream logic runs on the network, it simply makes sense to plug-in a serverless component to carry out visual communication. Enter Cloudinary. Forgo the complexity and expense of building your own image management solution and use a feature-rich cloud service instead (as the devil is often in the back-end)!

We’re excited to announce our new Cloudinary PubNub Block, for real-time image manipulation, processing, and transformation over the PubNub Programmable Network. You can dynamically adapt image properties while your image is being streamed, and deliver it to anyone subscribed to your channel. In this tutorial, we’ll show you how to get started with the block, including image resizing and reformatting while the data is in-motion.

Get a Cloudinary Account

Go to the Cloudinary signup page to create a free account with your chosen username.

Login to the Cloudinary Console with your credentials and grab the cloud name on the Dashboard screen under Account Details section. In the examples below, we are using <CloudName> which you should replace with your own cloud name to see the results processed within the media library of your Cloudinary account.

Create a Cloudinary Block

Create a new block (aptly named Cloudinary here) and take it for a test spin by sending it JSON payloads. First, a quick snapshot of the Cloudinary block code shows what it does – assembling an API URL from the JSON input fields and placing it as an extra field in the input message.

Run the block after setting its event handler channel to cloudinary-test

Use the following JSON test payload and click the Publish button (remember to replace <CloudName> with your own account’s cloud name).

Verify that the block’s event handler received and processed the test payload, augmenting the message with the API URL (cloudinaryLink) that your app can use to make image magic!

Make Magic with Cloudinary Image Manipulation

1. Resize Images

Change the “transformations” field in the input JSON to [“w_200″,”h_150”] to output the following API URL, that will rescale the sample JPEG image to half its original size:

http://res.cloudinary.com/<CloudName>/image/upload/w_432,h_288/sample.jpg

2. Crop Images

Alternatively, if you’re interested in cropping a 432×288 rectangle from the center of the sample image, use the transformation: [“w_200″,”h_150”,”c_crop”] to output the following:

http://res.cloudinary.com/<CloudName>/image/upload/w_432,h_288_c_crop/sample.jpg

3. Go Wild

How about a round thumbnail [“w_200″,”h_150”,”c_thumb”,”r_max”] that outputs this:

http://res.cloudinary.com/<CloudName>/image/upload/w_150,h_150,c_thumb,r_max/sample.jpg

There are many more options for image resizing and cropping, but let’s try something else – changing image formats. For that, we’d change the image field of the test payload from sample.jpg to sample.png (and revert to [“w_432,”h_288”] for the transformation field):

http://res.cloudinary.com/<CloudName>/image/upload/w_432,h_288/sample.png

If you feel particularly experimental, try changing the image field to sample.webp (which at the present time aren’t supported on IE and Safari browsers). You can find many more image format selections, image quality adjustments, plus applying effects and filters and image/text overlays and so on, even manipulating animated GIFs!

Build Cool Apps with the Cloudinary Block

Utilizing powerful image management via an easy-to-use JSON interface opens a wide range of possibilities to build, enhance or extend web and mobile apps. For example, sharing images among group chat participants, collaborative editing of an image, dynamically applying special effects, multi-party games based on visual media and so on.

In future articles, we’ll show how to build cool apps using the Cloudinary block, including use of a block’ key/value (KV) storage in tandem with data streaming features and optionally other custom-built blocks.