External APIs

Cloudinary: Image Manipulation

Manipulate, process, and transform image properties on the fly
Back to BLOCKS

About Cloudinary: Image Manipulation

Cloudinary offers a number of APIs for image manipulation and transformation, enabling dynamic resizing, optimization, cropping, and converting on the fly.

The Cloudinary block lets you execute any number of image manipulations while in-motion over the PubNub network. For example, you may have a collaborative app, and when images are shared, you may automatically want to crop and change the file type. With the Cloudinary block, this processing of the image takes place in realtime, before the image reaches its subscriber.

Try it Now
Categories:
External APIs External APIs
Bots & AI
Bots & AI
Chat & Social
Chat & Social
Gaming
Gaming
Last Updated:
20161020 at 12:49:57
Author:
PubNub

Walkthrough

Use the predefined block to create easy image transformations using the Cloudinary API.

Highlights:
– Dynamically adapt image properties — dimensions, crop, format, quality — and deliver an optimal version to every user, based on the image content and viewing context.
– Easily apply a variety of image manipulations, such as overlays, watermarks, artistic filters, rotations, modified shapes and much more.
– Seamlessly integrate Cloudinary with your application back-end using client-side integration libraries and SDKs for your development platform of choice: Ruby on Rails, PHP, Node.js, Angular, .Net, Python & Django, jQuery, Java, Scala, Android, iOS and more.

Input (Cloudinary Cloud)

For images that are stored on Cloudinary, use the “upload” directive and supply optional transformations. Input Channel: cloudinary-input
{
    "transformations": [
        "w_150",
        "h_150"
    ],
    "image": "myImage.jpg",
    "cloudName": "<Cloudinary Cloud Name>",
    "operation": "upload",
    "resource": "image"
}

Input (via fetch)

For images that are stored on other websites, use the “fetch” directive and supply optional transformations. Input Channel: cloudinary-input
{
    "transformations": [
        "w_150",
        "h_150"
    ],
    "image": "http://i.imgur.com/LcPmYfzr.jpg",
    "cloudName": "<Cloudinary Cloud Name>",
    "operation": "fetch",
    "resource": "image"
}

Output

The Block adds the revised Cloudinary image URL into the message payload
{
    ..
    "cloudinaryLink": <Link to cloudinary URL>,
    ..
}