JavaScript integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery. All your media resources are optimized and delivered through a fast CDN using industry best practices.

Using Cloudinary's JavaScript SDK, you can perform smart image and video manipulations using code that integrates seamlessly with your existing JavaScript application and deliver optimized and responsive media to your users.

Note: The following instructions describe the installation of the client-side libraries. For the server side NodeJS library, see the NodeJS documentation.

Quick example

The following Cloudinary URL and corresponding JavaScript SDK code generates the image below including all of the following transformations:

  • A thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
  • Rotated 20 degrees
  • Sepia effect
  • Cloudinary logo overlay on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opaqueness = 60%)
  • 10 degree rotation
  • Converted to and delivered in PNG format (the originally uploaded image was a JPG)

URLJS
URL:
https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_cloudinary_icon,g_south_east,x_5,y_5,w_50,o_60,e_brightness:200/a_10/front_face.png
JS:
cl.imageTag('front_face.png', {transformation: [
  {width: 150, height: 150, gravity: "face", radius: 20, effect: "sepia", crop: "thumb"},
  {overlay: "cloudinary_icon", gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"},
  {angle: 10}
  ]}).toHtml();
Example dynamic delivery URL
.

JavaScript SDK features

Cloudinary provides a JavaScript library with an easy-to-use API for further simplifying the integration.

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

JavaScript capitalization and data type guidelines

When using the Node.js SDK, 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

Getting started

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

Installation

Install the files using a package manager: 

# For NPM:   
npm install cloudinary-core --save
# For Bower: 
bower install cloudinary-core --save

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

Setup

1. Instantiate the cloudinary-core library

If you installed the files with NPM or Bower, 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

Otherwise, you can include the files in your 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 JavaScript library you have to configure at least your cloud_name. You can additionally define a number of optional configuration parameters if relevant.

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

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