JavaScript SDK

import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";

// Import required actions.
import {thumbnail, scale} from "@cloudinary/url-gen/actions/resize";
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
import {sepia} from "@cloudinary/url-gen/actions/effect";
import {source} from "@cloudinary/url-gen/actions/overlay";
import {opacity,brightness} from "@cloudinary/url-gen/actions/adjust";
import {byAngle} from "@cloudinary/url-gen/actions/rotate";

// Import required qualifiers.
import {image} from "@cloudinary/url-gen/qualifiers/source";
import {Position} from "@cloudinary/url-gen/qualifiers/position";
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";
import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";


// Create and configure your Cloudinary instance.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
}); 

// Instantiate a CloudinaryImage object for the image with public ID, 'front_face'.
const myImage = cld.image('front_face');

// Perform the transformation.
myImage
.resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face()))) // Crop the image.
.roundCorners(byRadius(20))    // Round the corners.
.effect(sepia())  // Apply a sepia effect.
.overlay(   // Overlay the Cloudinary logo.
  source(
    image('cloudinary_icon_blue')
      .transformation(new Transformation()
      .resize(scale(50)) // Resize the logo.
        .adjust(opacity(60))  // Adjust the opacity of the logo.
      .adjust(brightness(200)))  // Adjust the brightness of the logo.       
  )
  .position(new Position().gravity(compass('south_east')).offsetX(5).offsetY(5))   // Position the logo.
)
.rotate(byAngle(10))  // Rotate the result.
.format('png');   // Deliver as PNG. */

// Render the image in an 'img' element.
const imgElement = document.createElement('img');
imgElement.src = myImage.toURL();

// Import the Cloudinary class.
import {Cloudinary} from "@cloudinary/url-gen";

// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});

// cld.image returns a CloudinaryImage with the configuration set.
const myImage = cld.image('sample'); // sample is the public ID of the image.

// This returns: https://res.cloudinary.com/demo/image/upload/sample
const myURL = myImage.toURL();

// Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  },
  url: {
    secureDistribution: 'www.example.com', 
    secure: true 
  }
});

// Import the configuration classes.
import {URLConfig} from "@cloudinary/url-gen";
import {CloudConfig} from "@cloudinary/url-gen";
import {CloudinaryImage} from '@cloudinary/url-gen';

// Set the Cloud configuration and URL configuration
const cloudConfig = new CloudConfig({cloudName: 'demo'});
const urlConfig = new URLConfig({secure: true});

// Instantiate a new image passing the Cloud and URL configurations
const myImage = new CloudinaryImage('docs/shoes', cloudConfig, urlConfig);

// This returns: https://res.cloudinary.com/demo/image/upload/docs/shoes
const myURL = myImage.toURL();