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.
npm install cloudinary-jqueryCloudinary jQuery Plugin
=======================================
#### Note
This Readme provides basic installation and usage information.
For the complete documentation, see the Javascript SDK Guide.
bash
npm install cloudinary-jquery
`
Or
bash
yarn add cloudinary-jquery
`Usage
$3
Include the javascript file in your HTML. For Example:
html
`$3
##### As jQuery plugin
An instance of the Cloudinary jQuery main class,
, is instantiated as $.cloudinary.`javascript
$.cloudinary.config({ cloud_name: "demo"});
`##### Explicitly
javascript
var cl = cloudinary.Cloudinary.new( { cloud_name: "demo"});
`##### Using the config function
javascript// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "cloud_name", "demo");
`##### From meta tags in the current HTML document
When using the library in a browser environment, you can use meta tags to define the configuration options.
The
function is a convenience function that invokes both fromDocument() and fromEnvironment().
For example, add the following to the header tag:
`html
`In your JavaScript source, invoke
:
`javascript
var cl = cloudinary.Cloudinary.new();
cl.fromDocument();
// or
cl.init();
`##### From environment variables
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:
shell
export CLOUDINARY_URL=cloudinary://demo
`
In your JavaScript source, invoke :
`javascript
var cl = cloudinary.Cloudinary.new();
cl.fromEnvironment();
// or
cl.init();
`$3
- See full documentationjavascript
// Apply a single transformation
cl.url( "sample", { crop: "scale", width: "200", angle: "10" })// Chain (compose) multiple transformations
cl.url( "sample", {
transformation: [
{ angle: -45 },
{ effect: "trim", angle: "45", crop: "scale", width: "600" },
{ overlay: "text:Arial_100:Hello" }
]
});
`$3
- Use the image()` function to generate an HTMLImageElement
- Use the `imageTag()` function to generate an ImageTag instance
- Use the `video()` function to generate an HTMLVideoElement
- Use the `videoTag()` function to generate a VideoTag instance$3
See cloudinary-jquery-file-upload.Contributions
- Ensure tests run locally (`npm run test``)