Skip to content

Commit

Permalink
Thumbor API
Browse files Browse the repository at this point in the history
  • Loading branch information
sreevidya-16 authored Aug 9, 2024
1 parent 07dbe9b commit e0914fa
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 0 deletions.
35 changes: 35 additions & 0 deletions New_APIs/Thumbor API/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!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>Thumbor API Demo</title>
</head>
<body>
<header>
<h1>Thumbor Image Processing</h1>
</header>
<main>
<div class="content-section">
<h2>Upload Image</h2>
<input type="file" id="imageInput" accept="image/*">
<h2>Select Filters</h2>
<div>
<label>
<input type="checkbox" id="grayscaleFilter"> Grayscale
</label>
<label>
<input type="checkbox" id="blurFilter"> Blur
</label>
</div>
<button id="processImageButton">Process Image</button>
</div>
<div class="result-section">
<h2>Processed Image</h2>
<img id="processedImage" alt="Processed Image">
</div>
</main>
<script src="index.js"></script>
</body>
</html>
40 changes: 40 additions & 0 deletions New_APIs/Thumbor API/index.js
Original file line number Diff line number Diff line change
@@ -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);
}
26 changes: 26 additions & 0 deletions New_APIs/Thumbor API/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions New_APIs/Thumbor API/package.json
Original file line number Diff line number Diff line change
@@ -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:"
}
}
8 changes: 8 additions & 0 deletions New_APIs/Thumbor API/server.js
Original file line number Diff line number Diff line change
@@ -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');
});
70 changes: 70 additions & 0 deletions New_APIs/Thumbor API/style.css
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit e0914fa

Please sign in to comment.