cloudinary-core
Advanced tools
Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.
The cloudinary-core npm package is a JavaScript library that provides a set of tools for managing and transforming media assets using Cloudinary's cloud-based service. It allows developers to easily upload, manipulate, and deliver images and videos in their web applications.
Image Upload
This feature allows you to upload images to Cloudinary and generate URLs for accessing them. The code sample demonstrates how to create a Cloudinary instance and generate a URL for an uploaded image.
const cloudinary = require('cloudinary-core');
const cl = new cloudinary.Cloudinary({ cloud_name: 'your_cloud_name', secure: true });
const imageUrl = cl.url('sample.jpg');
console.log(imageUrl);Image Transformation
This feature allows you to apply various transformations to images, such as resizing, cropping, and applying effects. The code sample demonstrates how to generate a URL for an image with specific transformations applied.
const cloudinary = require('cloudinary-core');
const cl = new cloudinary.Cloudinary({ cloud_name: 'your_cloud_name', secure: true });
const transformedImageUrl = cl.url('sample.jpg', { width: 300, height: 300, crop: 'fill' });
console.log(transformedImageUrl);Video Transformation
This feature allows you to apply transformations to videos, similar to image transformations. The code sample demonstrates how to generate a URL for a video with specific transformations applied.
const cloudinary = require('cloudinary-core');
const cl = new cloudinary.Cloudinary({ cloud_name: 'your_cloud_name', secure: true });
const transformedVideoUrl = cl.video_url('sample.mp4', { width: 300, height: 300, crop: 'fill' });
console.log(transformedVideoUrl);Responsive Images
This feature allows you to generate URLs for responsive images that automatically adjust to different screen sizes. The code sample demonstrates how to generate a URL for a responsive image.
const cloudinary = require('cloudinary-core');
const cl = new cloudinary.Cloudinary({ cloud_name: 'your_cloud_name', secure: true });
const responsiveImageUrl = cl.url('sample.jpg', { responsive: true });
console.log(responsiveImageUrl);The imgix-core-js package provides similar functionalities for managing and transforming images using the Imgix service. It allows developers to easily generate URLs for images with various transformations applied. Compared to cloudinary-core, imgix-core-js focuses solely on image transformations and does not support video transformations.
The filestack-js package offers a comprehensive set of tools for file uploading, transformation, and delivery using the Filestack service. It supports both images and videos, similar to cloudinary-core. However, Filestack provides additional features such as file storage and security options.
The imagekit-javascript package provides functionalities for image and video management, including uploading, transformation, and optimization using the ImageKit service. It offers similar features to cloudinary-core but also includes advanced optimization techniques for faster delivery.
:information_source: This is a distribution repository for bower and npm. The sources for this repository are maintained at the cloudinary_js repository. Please submit issues and pull requests to that repository.
bower and npm repositoryCloudinary is a cloud service that offers a solution to a web application's entire image management pipeline.
Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.
Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.
Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.
Take a look at our Getting started guide for jQuery. (Core JavaScript documentation coming soon.)
Install the files using the following command. Use the optional --save parameter if you wish to save the dependency in your bower.json file.
bower install cloudinary-core
Include the javascript file in your HTML. For Example:
<script src="bower_components/lodash/lodash.js" type="text/javascript"></script>
<script src="bower_components/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
If you do not intend to use lodash in your own code, you can instead use the shrinkwrap version which includes a subset
of the lodash functions. This reduces the loaded code by about 50%!
<script src="bower_components/cloudinary-core/cloudinary-core-shrinkwrap.js" type="text/javascript"></script>
The following instructions describe the installation of the client-side libraries. For the server side NodeJS library, see https://github.com/cloudinary/cloudinary_npm
Install the files using:
npm install cloudinary-core
Include the javascript file in your HTML. For Example:
<script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
See comment above regarding the shrinkwrap version.
For the server side NPM library, please refer to https://github.com/cloudinary/cloudinary_npm.
In order to properly use this library you have to provide it with a few configuration parameters:
Required:
cloud_name - The cloudinary cloud name associated with your Cloudinary account.Optional:
private_cdn, secure_distribution, cname, cdn_subdomain - Please refer to Cloudinary Documentation for information on these parameters.To set these configuration parameters use the Cloudinary::config function (see below).
The following blog post details the process of setting up a jQuery based file upload. http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
The Cloudinary Documentation can be found at: http://cloudinary.com/documentation
The Core Cloudinary JavaScript library provides several classes, defined under the "cloudinary" domain. The reference documentation is located at https://cloudinary.github.io/pkg-cloudinary-core
The Cloudinary JavaScript library provides several classes, defined under the "cloudinary" domain.
Start by instantiating a new Cloudinary class:
var cl = cloudinary.Cloudinary.new( { cloud_name: "demo"});
// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "cloud_name", "demo");
When using the library in a browser environment, you can use meta tags to define the configuration options.
The init() function is a convenience function that invokes both fromDocument() and fromEnvironment().
For example, add the following to the header tag:
<meta name="cloudinary_cloud_name" content="demo">
In your JavaScript source, invoke fromDocument():
var cl = cloudinary.Cloudinary.new();
cl.fromDocument();
// or
cl.init();
When using the library in a backend environment such as NodeJS, you can use an environment variable to define the configuration options.
Set the environment variable, for example:
export CLOUDINARY_URL=cloudinary://demo
In your JavaScript source, invoke fromEnvironment():
var cl = cloudinary.Cloudinary.new();
cl.fromEnvironment();
// or
cl.init();
cl.url("sample")
// "http://res.cloudinary.com/demo/image/upload/sample"
cl.url( "sample", { width: 100, crop: "fit"})
// "http://res.cloudinary.com/demo/image/upload/c_fit,w_100/sample"
You can generate HTML tags in several ways:
Cloudinary::image() generates a DOM tag, and prepares it for responsive functionality. This is the same functionality as $.cloudinary.image() in the Cloudinary jQuery library.
cl.image("sample")
produces:
<img src="http://res.cloudinary.com/demo/image/upload/sample" data-src-cache="http://res.cloudinary.com/demo/image/upload/sample">
You can generate an image Tag using the imageTag function:
var tag = cl.imageTag("sample");
tag.toHtml();
which produces:
<img src="http://res.cloudinary.com/demo/image/upload/sample">
and:
tag.transformation().crop("fit").width(100).toHtml();
which produces:
<img src="http://res.cloudinary.com/demo/image/upload/c_fit,w_100/sample">
You can also use ImageTag independently:
var tag = cloudinary.ImageTag.new( "sample", { cloud_name: "some_other_cloud" });
tag.toHtml();
which produces:
<img src="http://res.cloudinary.com/some_other_cloud/image/upload/sample">
In addition to using a plain object to define transformations or using the builder methods (both described above), you can define transformations by using the Transformation class:
var tr = cloudinary.Transformation.new();
tr.crop("fit").width(100);
tr.serialize()
// "c_fit,w_100"
You can also chain transformations together:
var tr = cloudinary.Transformation.new();
tr.width(10).crop('fit').chain().angle(15).serialize()
// "c_fit,w_10/a_15"
See our documentation for more information about displaying and transforming images using jQuery.
If you are using jQuery, you can take advantage of the Cloudinary jQuery plugin at https://github.com/cloudinary/pkg-cloudinary-jquery.
The Cloudinary jQuery File Upload library extends the Cloudinary jQuery plugin with support for the Blueimp jQuery File Upload library. The library can be found at https://github.com/cloudinary/pkg-cloudinary-jquery-file-upload.
Additional resources are available at:
You can open an issue through GitHub.
Contact us at http://cloudinary.com/contact.
Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.
Released under the MIT license.
FAQs
Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.
We found that cloudinary-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.