new ui update

davenarchives · Oct 9, 2024 · 737c26b · 737c26b
1 parent f58c84b
commit 737c26b
Show file tree

Hide file tree

Showing 6 changed files with 390 additions and 252 deletions.
diff --git a/images/Imgbgremoverlogo.svg b/images/Imgbgremoverlogo.svg
diff --git a/index.html b/index.html
@@ -4,42 +4,54 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>IMG Background Remover</title>
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="style.css">
   <link rel="icon" type="image/png" href="images/imgbgremover.png">
 </head>
 <body>
 
-  <div class="header">
-    <header>
-      <h1>Image Background Remover</h1>
-      <p>Created by: <a href="https://github.com/davenarchives" target="_blank" id="creator-link">DavenArchives</a></p>
-    </header>
-  </div>
-
-  <div class="container">
-    <h2>Upload an image to remove the background</h2>
-
-    <div id="drop-area">
-      <p>Drag & Drop files here or</p>
-      <button id="choose-file-btn">Choose File</button>
-      <input type="file" id="fileElem" accept="image/*" style="display:none">
+  <div class="main-container">
+    <div class="title-container">
+      <header>
+        <h1>Image Background Remover</h1>
+        <p>Created by: <a href="https://github.com/davenarchives" target="_blank" id="creator-link">DavenArchives</a></p>
+      </header>
+      <a href="https://github.com/davenarchives/img-bg-remover" target="_blank">
+        <img src="images/Imgbgremoverlogo.svg" alt="Logo Background Remover">
+      </a>
     </div>
-
-    <div id="output">
-      <div id="comparison" style="display: none;"> 
-        <div class="image-container" id="before-image">
-          <h2>Before</h2>
-          <img id="originalImage" alt="Original Image">
-        </div>
-        <div class="image-container" id="after-image">
-          <h2>After</h2>
-          <img id="processedImage" alt="Processed Image">
+
+    <div class="upload-container">
+      <h2>upload or paste an image url</h2>
+      <div id="drop-area">
+        <p id="p1">Drag & Drop</p>
+        <p id="p2">image here,</p>
+        <button id="choose-file-btn">Choose Image</button>
+        <input type="file" id="fileElem" accept="image/*" style="display:none">
+
+        <div class="url-container">
+          <p id="p3">or</p>
+          <input type="text" id="imageUrlInput" placeholder="Paste image URL here">
         </div>
       </div>
     </div>
+  </div>
+
+  <div id="output" class="hidden">
+    <div id="comparison"> 
+      <div class="image-container" id="before-image">
+        <h2>Before</h2>
+        <img id="originalImage" alt="Original Image">
+      </div>
+      <div class="image-container" id="after-image">
+        <h2>After</h2>
+        <img id="processedImage" alt="Processed Image">
+      </div>
+    </div>
 
-    <a id="downloadBtn" class="hidden" download="removed-background.png">Download Image</a>
-    <button id="resetBtn" class="hidden">Reset</button>
+    <div class="button-container">
+      <a id="downloadBtn" class="hidden" download="removed-background.png">Download Image</a>
+      <button id="resetBtn" class="hidden">Reset</button>
+    </div>
   </div>
 
   <script src="script.js"></script>

diff --git a/output.html b/output.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Processed Image</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div id="output">
+    <div id="comparison"> 
+      <div class="image-container" id="before-image">
+        <h2>Before</h2>
+        <img id="originalImage" alt="Original Image">
+      </div>
+      <div class="image-container" id="after-image">
+        <h2>After</h2>
+        <img id="processedImage" alt="Processed Image">
+      </div>
+    </div>
+
+    <div class="button-container">
+      <a id="downloadBtn" download="removed-background.png">Download Image</a>
+      <button id="resetBtn">Reset</button>
+    </div>
+  </div>
+
+  <script src="output.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -1,5 +1,6 @@
 const dropArea            = document.getElementById('drop-area');
 const fileInput           = document.getElementById('fileElem');
+const imageUrlInput       = document.getElementById('imageUrlInput');
 const output              = document.getElementById('output');
 const downloadBtn         = document.getElementById('downloadBtn');
 const chooseFileBtn       = document.getElementById('choose-file-btn');
@@ -35,6 +36,13 @@ fileInput.addEventListener('change', (e) => {
   handleFiles(e.target.files);
 });
 
+imageUrlInput.addEventListener('paste', (e) => {
+  const pastedUrl = e.clipboardData.getData('text');
+  if (pastedUrl) {
+    fetchImageFromUrl(pastedUrl);
+  }
+});
+
 function handleDrop(e) {
   let dt = e.dataTransfer;
   let files = dt.files;
@@ -52,7 +60,59 @@ function uploadFile(file) {
   const originalURL = URL.createObjectURL(file);
   originalImage.src = originalURL;
 
-  comparisonContainer.style.display = 'flex'; 
+  showOutput();
+
+  fetch('https://api.remove.bg/v1.0/removebg', {
+    method: 'POST',
+    headers: {
+      'X-Api-Key': 'UartFkyZmYmZfJvykz6e5AAG',
+    },
+    body: formData
+  })
+  .then(response => {
+    if (!response.ok) {
+      return response.json().then(err => {
+        throw new Error(`HTTP error! Status: ${response.status}, Message: ${err.message}`);
+      });
+    }
+    return response.blob();
+  })
+  .then(blob => {
+    const imgURL = URL.createObjectURL(blob);
+    processedImage.src = imgURL;
+    enableDownload(imgURL);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+    alert('Upload failed: ' + error.message);
+  });
+}
+
+function fetchImageFromUrl(url) {
+  fetch(url)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to fetch image from URL.');
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      const originalURL = URL.createObjectURL(blob);
+      originalImage.src = originalURL;
+
+      showOutput();
+
+      return uploadFileFromBlob(blob);
+    })
+    .catch(error => {
+      console.error('Error fetching image from URL:', error);
+      alert('Failed to fetch image from URL.');
+    });
+}
+
+function uploadFileFromBlob(blob) {
+  const formData = new FormData();
+  formData.append('image_file', blob);
 
   fetch('https://api.remove.bg/v1.0/removebg', {
     method: 'POST',
@@ -67,29 +127,35 @@ function uploadFile(file) {
         throw new Error(`HTTP error! Status: ${response.status}, Message: ${err.message}`);
       });
     }
-    return response.blob();  
+    return response.blob();
   })
   .then(blob => {
-    const imgURL = URL.createObjectURL(blob); 
-    processedImage.src = imgURL; 
-    enableDownload(imgURL); 
+    const imgURL = URL.createObjectURL(blob);
+    processedImage.src = imgURL;
+    enableDownload(imgURL);
   })
-  .catch((error) => {
-    console.error('Error:', error); 
+  .catch(error => {
+    console.error('Error:', error);
     alert('Upload failed: ' + error.message);
   });
 }
 
+function showOutput() {
+  comparisonContainer.style.display = 'flex';
+  output.classList.remove('hidden');
+}
+
 function enableDownload(imageUrl) {
-  downloadBtn.href = imageUrl; 
-  downloadBtn.classList.remove('hidden'); 
+  downloadBtn.href = imageUrl;
+  downloadBtn.classList.remove('hidden');
   resetBtn.classList.remove('hidden');
 }
 
 resetBtn.addEventListener('click', () => {
-  originalImage.src = ''; 
-  processedImage.src = ''; // Clear processed image
-  comparisonContainer.style.display = 'none'; // Hide comparison section
-  downloadBtn.classList.add('hidden'); // Hide download button
-  resetBtn.classList.add('hidden'); // Hide reset button
+  originalImage.src = '';
+  processedImage.src = '';
+  comparisonContainer.style.display = 'none';
+  downloadBtn.classList.add('hidden');
+  resetBtn.classList.add('hidden');
+  output.classList.add('hidden');
 });