JavaScript SDK
Overview
Cloudinary is a cloud-based service that provides an end-to-end image and video management solution. The JavaScript SDK provides simple, yet comprehensive image and video manipulation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing JavaScript application.
Quick example
The following Cloudinary URL and corresponding JavaScript SDK code delivers the image below in an https
delivery URL, including all of the following transformations:
- Thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
- Rounded corners with a 20 pixel radius
- Sepia effect
- Overlay of the Cloudinary logo on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opacity = 60%)
- Rotated by 10 degrees
- Converted to and delivered in PNG format (the originally uploaded image was a JPG)
cloudinary.imageTag('front_face.png', {secure: true, transformation: [ {width: 150, height: 150, gravity: "face", radius: 20, effect: "sepia", crop: "thumb"}, {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"}, {angle: 10} ]}).toHtml();
![Example dynamic delivery URL Example dynamic delivery URL](http://web.archive.org./web/20190213180708im_/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)
JavaScript SDK features
- 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 the NPM package manager:
npm 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, 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 can find your account-specific configuration credentials in the dashboard of our Management Console.
You set configuration parameters while instantiating a new Cloudinary class, for example:
var cl = new cloudinary.Cloudinary({cloud_name: "demo", secure: true});