Introduction to Cloudinary

Cloudinary is a comprehensive cloud-based service for managing all your web or mobile application’s media needs. With Cloudinary’s suite of APIs, developers can effortlessly manage, optimize, transform, and deliver images and videos.

Getting Started with Cloudinary

First, you need to set up your Cloudinary account and get your cloud name, API Key, and API Secret.

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

  const cld = new Cloudinary({
    cloud: {
      cloudName: 'your-cloud-name',
      apiKey: 'your-api-key',
      apiSecret: 'your-api-secret'
    }
  });

Upload API

Upload an image or video to Cloudinary with the `upload` method.

  const cloudinary = require('cloudinary').v2;

  cloudinary.uploader.upload('path/to/your/image.jpg', function(error, result) {
    console.log(result, error);
  });

Transformation API

Transform images on the fly by resizing, cropping, adding text overlays, etc.

  const url = cld.image('sample')
    .resize({ width: 300, height: 300, crop: 'fill' })
    .overlay({ fontFamily: 'Arial', fontSize: 30, text: 'Hello World' })
    .toURL();

Responsive Images

Create responsive images for different device sizes.

  const responsiveUrl = cld.image('sample')
    .resize({ width: 300, height: 300, crop: 'fill' })
    .deliveryType('auto').toURL();

Video Transformations

Apply transformations to videos as well.

  const videoUrl = cld.video('sample')
    .resize({ width: 500, height: 500, crop: 'fit' })
    .overlay({ fontFamily: 'Arial', fontSize: 20, text: 'Hello Video' })
    .toURL();

Create an App with Cloudinary

Let’s create a simple Node.js app to upload an image to Cloudinary and display the transformed image in the browser.

  const express = require('express');
  const multer = require('multer');
  const cloudinary = require('cloudinary').v2;
  const app = express();

  cloudinary.config({ 
    cloud_name: 'your-cloud-name', 
    api_key: 'your-api-key', 
    api_secret: 'your-api-secret'
  });

  const storage = multer.memoryStorage();
  const upload = multer({ storage: storage });

  app.post('/upload', upload.single('file'), function(req, res) {
    cloudinary.uploader.upload_stream({ resource_type: 'auto' }, (error, result) => {
      if (error) return res.status(500).send(error);
      res.send(result);
    }).end(req.file.buffer);
  });

  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });

After setting up the app, you can use an HTML form to upload an image and display the transformed version.

  

    
    Upload
  

Cloudinary APIs offer unlimited possibilities for media management in your applications. We encourage you to explore more at their official documentation.

Hash: 4afcef5dd73bf324ddf3a9093d013495cbdb8e1015b0b689f27ab5f617f115bc