Search
.
PubNub Integration

Cloudinary: Image Manipulation

Contact Sales
Vision

Vision

Other

Other

Last Updated:

2016/10/20

Author:

PubNub

Free registration Features Support Documentation
MIT/OPEN SOURCE License

Manipulate, process, and transform image properties on the fly

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 real time, before the image reaches its subscriber.

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>,
}

Feedback & Support

Need help? Contact PubNub Support.

Talk to an expert

Contact Sales