diff --git a/New_APIs/Thumbor API/README.md b/New_APIs/Thumbor API/README.md new file mode 100644 index 0000000..897d44e --- /dev/null +++ b/New_APIs/Thumbor API/README.md @@ -0,0 +1,29 @@ +# 🖼️ Thumbor API + +## Overview + +The **Thumbor API** is a smart imaging service that allows for dynamic cropping, resizing, and flipping of images. Thumbor is perfect for web applications needing on-the-fly image manipulation with speed and efficiency. This API provides a powerful toolset for developers to create rich media experiences. + +## Features + +- **Dynamic Resizing**: Resize images on the fly to fit different screen sizes and resolutions. +- **Smart Cropping**: Automatically crop images to focus on the most important regions. +- **Filters & Effects**: Apply various filters, such as brightness, contrast, and blur. +- **Image Flipping & Rotation**: Easily flip and rotate images to suit your needs. +- **URL-Based Image Processing**: Manipulate images using a simple URL structure. + +## Getting Started + +### Prerequisites + +- **Thumbor Server**: You need to have a Thumbor server running. You can set up a Thumbor server by following the official [Thumbor installation guide](https://thumbor.readthedocs.io/en/latest/installation.html). + +### Installation + +To use the Thumbor API in a Node.js application, you can install the `thumbor` package via npm: + +```bash +npm install thumbor +``` +## Contributor +### Sree Vidya diff --git a/New_APIs/Thumbor API/index.html b/New_APIs/Thumbor API/index.html new file mode 100644 index 0000000..4e442e3 --- /dev/null +++ b/New_APIs/Thumbor API/index.html @@ -0,0 +1,35 @@ + + + + + + + Thumbor API Demo + + +
+

Thumbor Image Processing

+
+
+
+

Upload Image

+ +

Select Filters

+
+ + +
+ +
+
+

Processed Image

+ Processed Image +
+
+ + + diff --git a/New_APIs/Thumbor API/index.js b/New_APIs/Thumbor API/index.js new file mode 100644 index 0000000..d6e212f --- /dev/null +++ b/New_APIs/Thumbor API/index.js @@ -0,0 +1,40 @@ +document.getElementById('processImageButton').addEventListener('click', processImage); + +const thumborBaseUrl = 'YOUR_THUMBOR_SERVER_URL'; // Replace with your Thumbor server URL + +async function processImage() { + const imageInput = document.getElementById('imageInput').files[0]; + if (!imageInput) { + alert('Please upload an image.'); + return; + } + + const filters = []; + if (document.getElementById('grayscaleFilter').checked) { + filters.push('filters:grayscale()'); + } + if (document.getElementById('blurFilter').checked) { + filters.push('filters:blur(10)'); + } + + const reader = new FileReader(); + reader.onload = async function(event) { + const imageData = event.target.result; + const processedImageUrl = `${thumborBaseUrl}/${filters.join('/')}/smart/${imageData}`; + + try { + const response = await fetch(processedImageUrl); + if (response.ok) { + const blob = await response.blob(); + const url = URL.createObjectURL(blob); + document.getElementById('processedImage').src = url; + } else { + alert('Failed to process image.'); + } + } catch (error) { + console.error('Error:', error); + alert('Error processing image.'); + } + }; + reader.readAsDataURL(imageInput); +} diff --git a/New_APIs/Thumbor API/package-lock.json b/New_APIs/Thumbor API/package-lock.json new file mode 100644 index 0000000..8a973a3 --- /dev/null +++ b/New_APIs/Thumbor API/package-lock.json @@ -0,0 +1,26 @@ +{ + "name": "thumbor-api-demo", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "thumbor-api-demo", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "express": "^4.17.1", + "thumbor-api-demo": "file:" + } + }, + "node_modules/express": { + "version": "4.17.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", + "integrity": "sha512-G7fYv8zS0D7ftu3gnLsOniwhgLU4k9v+1NEtFPP07/Oa8XJ51FtdUKLqIvsTcZo5ua23NO4s9Hr77BM19DOf1g==" + }, + "node_modules/thumbor-api-demo": { + "resolved": "", + "link": true + } + } +} diff --git a/New_APIs/Thumbor API/package.json b/New_APIs/Thumbor API/package.json new file mode 100644 index 0000000..85ae095 --- /dev/null +++ b/New_APIs/Thumbor API/package.json @@ -0,0 +1,15 @@ +{ + "name": "thumbor-api-demo", + "version": "1.0.0", + "description": "A simple app to demonstrate the Thumbor API", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "author": "Your Name", + "license": "ISC", + "dependencies": { + "express": "^4.17.1", + "thumbor-api-demo": "file:" + } +} diff --git a/New_APIs/Thumbor API/server.js b/New_APIs/Thumbor API/server.js new file mode 100644 index 0000000..74380f6 --- /dev/null +++ b/New_APIs/Thumbor 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/Thumbor API/style.css b/New_APIs/Thumbor API/style.css new file mode 100644 index 0000000..650afc7 --- /dev/null +++ b/New_APIs/Thumbor API/style.css @@ -0,0 +1,70 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #6dd5fa, #d828b2); + 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; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +main { + width: 90%; + max-width: 600px; + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +.content-section, +.result-section { + margin-bottom: 20px; + text-align: center; +} + +input[type="file"] { + display: block; + margin: 0 auto 15px auto; + font-size: 1em; + border: none; + border-radius: 5px; + outline: none; + padding: 10px; + width: 80%; + max-width: 400px; +} + +button { + padding: 10px 20px; + 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; +} + +img#processedImage { + max-width: 100%; + border-radius: 10px; + margin-top: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +}