dishamodi0910 · revanth1718 · Aug 9, 2024 · Aug 9, 2024
diff --git a/New_APIs/Cloudinary API/README.md b/New_APIs/Cloudinary API/README.md
@@ -0,0 +1,30 @@
+# ☁️ Cloudinary API
+
+## Overview
+
+The **Cloudinary API** is a comprehensive image and video management service that provides powerful capabilities for image processing, including resizing, cropping, transformations, and effects. It also supports video processing and streaming, making it a versatile tool for managing media content in your applications.
+
+## Features
+
+- **Image Resizing**: Resize images to fit different dimensions and formats.
+- **Cropping & Transformations**: Crop, rotate, and apply various transformations to images and videos.
+- **Effects & Filters**: Apply filters, effects, and adjustments to enhance media quality.
+- **Video Processing**: Support for video transformations and streaming.
+- **Optimized Delivery**: Deliver optimized images and videos based on user device and browser.
+
+## Getting Started
+
+### Prerequisites
+
+- **Cloudinary Account**: Sign up for a Cloudinary account to obtain your API credentials. You can get your credentials by visiting the [Cloudinary dashboard](https://cloudinary.com/).
+
+### Installation
+
+To use the Cloudinary API in a Node.js application, you can use the `cloudinary` npm package:
+
+```bash
+npm install cloudinary
+```
+
+## Contributed by
+### Revanth
diff --git a/New_APIs/Cloudinary API/index.html b/New_APIs/Cloudinary API/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Cloudinary Image Processor</title>
+</head>
+<body>
+    <header>
+        <h1>Cloudinary Image Processor</h1>
+    </header>
+    <main>
+        <div class="upload-section">
+            <input type="file" id="imageUpload" accept="image/*">
+            <button id="uploadButton">Upload Image</button>
+        </div>
+        <div class="transform-section">
+            <h2>Transform Image</h2>
+            <input type="number" id="resizeWidth" placeholder="Width (px)">
+            <input type="number" id="resizeHeight" placeholder="Height (px)">
+            <input type="text" id="cropType" placeholder="Crop Type (e.g., fill)">
+            <button id="transformButton">Apply Transformations</button>
+        </div>
+        <div class="result-section">
+            <h2>Transformed Image</h2>
+            <img id="transformedImage" src="" alt="Transformed Image">
+        </div>
+    </main>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/New_APIs/Cloudinary API/index.js b/New_APIs/Cloudinary API/index.js
@@ -0,0 +1,57 @@
+document.getElementById('uploadButton').addEventListener('click', uploadImage);
+document.getElementById('transformButton').addEventListener('click', transformImage);
+
+const cloudName = 'YOUR_CLOUDINARY_CLOUD_NAME'; // Replace with your Cloudinary cloud name
+const uploadPreset = 'YOUR_UPLOAD_PRESET'; // Replace with your Cloudinary upload preset
+
+let uploadedImageUrl = '';
+
+function uploadImage() {
+    const fileInput = document.getElementById('imageUpload');
+    const file = fileInput.files[0];
+
+    if (!file) {
+        alert('Please select an image to upload.');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('upload_preset', uploadPreset);
+
+    fetch(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        uploadedImageUrl = data.secure_url;
+        alert('Image uploaded successfully.');
+    })
+    .catch(error => {
+        console.error('Error uploading image:', error);
+        alert('Failed to upload image.');
+    });
+}
+
+function transformImage() {
+    const width = document.getElementById('resizeWidth').value;
+    const height = document.getElementById('resizeHeight').value;
+    const crop = document.getElementById('cropType').value;
+
+    if (!uploadedImageUrl) {
+        alert('Please upload an image first.');
+        return;
+    }
+
+    const transformations = [];
+    if (width) transformations.push(`w_${width}`);
+    if (height) transformations.push(`h_${height}`);
+    if (crop) transformations.push(`c_${crop}`);
+
+    const transformationString = transformations.join(',');
+
+    const transformedImageUrl = uploadedImageUrl.replace('/upload/', `/upload/${transformationString}/`);
+
+    document.getElementById('transformedImage').src = transformedImageUrl;
+}
diff --git a/New_APIs/Cloudinary API/package-lock.json b/New_APIs/Cloudinary API/package-lock.json
diff --git a/New_APIs/Cloudinary API/package.json b/New_APIs/Cloudinary API/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "cloudinary-image-processor",
+  "version": "1.0.0",
+  "description": "A simple app to upload and transform images using Cloudinary API",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "Your Name",
+  "license": "ISC",
+  "dependencies": {
+    "cloudinary-image-processor": "file:",
+    "express": "^4.17.1"
+  }
+}
diff --git a/New_APIs/Cloudinary API/server.js b/New_APIs/Cloudinary API/server.js
@@ -0,0 +1,8 @@
+const express = require('express');
+const app = express();
+
+app.use(express.static('public'));
+
+app.listen(3000, () => {
+    console.log('Server is running on port 3000');
+});
diff --git a/New_APIs/Cloudinary API/style.css b/New_APIs/Cloudinary API/style.css
@@ -0,0 +1,69 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 3em;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+}
+
+main {
+    width: 90%;
+    max-width: 800px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.upload-section,
+.transform-section,
+.result-section {
+    margin-bottom: 20px;
+}
+
+.upload-section input,
+.transform-section input {
+    margin-right: 10px;
+    padding: 10px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    width: 150px;
+    outline: none;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 1em;
+    background-color: #444;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #666;
+}
+
+.result-section img {
+    max-width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}