JavaScript SDK (Legacy)

Important
This is the legacy version of the JavaScript SDK (cloudinary-core v2.x).

For details on migrating to the current version of the SDK (js-url-gen v1.x), see the JavaScript SDK migration guide.

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.

Tip
In this guide you'll learn how to get started with the JavaScript SDK, but if you are not familiar with Cloudinary, we advise reading How to integrate Cloudinary first for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts.

Related topics
This guide relates to the latest released version of the JavaScript cloudinary-core v2.x library.

For details on all new features and fixes from previous minor versions, see the CHANGELOG.

On this page:

Note
This guide describes Cloudinary's JavaScript cloudinary-core frontend library. For the backend Node.js library, see the Node.js documentation.

Quick example

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

JS:
Copy to clipboard
cloudinary.imageTag('front_face.png', {secure: true, transformation: [
  {width: 150, height: 150, gravity: "face", crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue"), gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"},
  {angle: 10}
  ]}).toHtml();
sample transformation

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:

In a similar way, you can transform a video.

Learn more about transformations

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:

Copy to clipboard
npm install cloudinary-core --save

The optional --save parameter saves the dependency in your package.json file.

Note
Instead of installing the files, the latest minor version of the cloudinary-core library can also be directly referenced from https://unpkg.com/cloudinary-core@latest. For production use, we recommend that you use a specific version, and not the latest, to protect yourself from any breaking changes.

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.

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

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

Copy to clipboard
<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 cloud_name. You can additionally define a number of optional configuration parameters if relevant. You can find your account-specific configuration credentials in the dashboard of our Management Console.

Notes

  • Most functionality implemented on the client side does not require authentication, so only your cloud_name is required to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use signed uploads or generate delivery signatures, you’ll also need server-side code, for which you can use one of our backend SDKs.
  • For backward compatibility reasons, the default value of the optional secure configuration parameter is false. However, for most modern applications, it's recommended to configure the secure parameter to true to ensure that your transformation URLs are always generated as HTTPS.

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

  • If using import {Cloudinary} from "cloudinary-core";:
Copy to clipboard
  var cl = new Cloudinary({cloud_name: "demo", secure: true});
  • If using var cloudinary = require("cloudinary-core"); or <script src="/cloudinary-core/cloudinary-core.js"...:
Copy to clipboard
  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

✔️ Feedback sent!

Rate this page: