JavaScript SDK (Legacy)

Overview

Cloudinary's JavaScript SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing JavaScript application.

On this page:

• Overview
  • Quick example
  • JavaScript SDK features
• Get started
  • Installation
  • Setup
  • JavaScript capitalization and data type guidelines

Rate this page:

Quick example

Take a look at the following transformation code and the image it delivers:

cloudinary.imageTag('front_face.png', {secure: true, transformation: [
  {gravity: "face", height: 150, width: 150, crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {effect: "brightness:90"},
  {opacity: 60},
  {width: 50, crop: "scale"},
  {flags: "layer_apply", gravity: "south_east", x: 5, y: 5},
  {angle: 10}
  ]}).toHtml();

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

• Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
• Round the corners with a 20 pixel radius
• Apply a sepia effect
• Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
• Rotate the resulting image (including the overlay) by 10 degrees
• Convert and deliver the image in PNG format (the originally uploaded image was a JPG)

And here's the URL that would be included in the image tag that's automatically generated from the above code:

https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png

In a similar way, you can transform a video.

JavaScript SDK features

• Build URLs for image and video transformation
• JavaScript view helper tags for embedding and transforming images, and more

Get started

This section describes the information you need to know for installing and setting up JavaScript.

Installation

Install the files using the NPM package manager:

npm install cloudinary-core

Setup

1. Instantiate the cloudinary-core library

If you installed the files with NPM, instantiate a new variable with the cloudinary-core library within your code.

var cloudinary = require("cloudinary-core"); // If your code is for ES5
import {Cloudinary} from "cloudinary-core";    // If your code is for ES6 or higher

Or, if using ES6 or higher without a bundler, for example, in a script:

import cld from "cloudinary-core";
const {Cloudinary} = cld;

Otherwise, you can include the files in your HTML page. For Example:

<script src="/lodash/lodash.js" type="text/javascript"></script>
<script src="/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>

2. Set Cloudinary configuration parameters

To use the Cloudinary cloudinary-core library you have to configure at least your product environment cloud_name. You can additionally define a number of optional configuration parameters if relevant. You can find your Cloud name in the Programmable Media Dashboard of the Cloudinary Console, and you can find all of your credentials, including API Key and API Secret, on the API Keys page of the Cloudinary Console Settings.

You set configuration parameters while instantiating a new Cloudinary class, for example:

• If using import {Cloudinary} from "cloudinary-core";:

  var cl = new Cloudinary({cloud_name: "demo", secure: true});

• If using var cloudinary = require("cloudinary-core"); or <script src="/cloudinary-core/cloudinary-core.js"...:

  var cl = new cloudinary.Cloudinary({cloud_name: "demo", secure: true});

JavaScript capitalization and data type guidelines

When using the cloudinary-core library, keep these guidelines in mind:

• Parameter names: snake_case. For example: public_id
• Classes: PascalCase. For example: ImageTag
• Methods: camelCase. For example: toHTML
• Pass parameter data as: Object