Add files via upload

Whether you're a professional photographer, a social media influencer, or simply someone who wants to enhance their digital content, our app is designed to cater to all your background removal needs. I developed this web application using HTML, CSS, JavaScript and API which made this simple and efficient .
Anirudh99N · Aug 10, 2023 · 7c4d99c · 7c4d99c
commit 7c4d99c
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 0 deletions.
diff --git a/Background_Remover/TestingImages/cristiano-ronaldo-portugal-5-june-2022.jpg b/Background_Remover/TestingImages/cristiano-ronaldo-portugal-5-june-2022.jpg
diff --git a/Background_Remover/TestingImages/messi.jpg b/Background_Remover/TestingImages/messi.jpg
diff --git a/Background_Remover/main.html b/Background_Remover/main.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>background remover</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+  </head>
+
+  <style>
+    *{
+        margin: 0;
+        background-color: black;
+    }
+    header{
+        margin: 0;
+        background-color: gray;
+        color: black;
+        padding: 10px;
+        text-align: center;
+        font-weight: 100;
+        font-size: x-large;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        border-radius: 5px;
+    }
+    .top{
+        background-color: black;
+    }
+    nav a{
+            text-decoration: none;
+            padding: 20px;
+            text-align: center;
+            display: inline-flex;
+    }
+    .logo{
+        margin-left: 35%;
+    }
+    .uplo{
+        text-align: center;
+        margin-top: 25px;
+        color: whitesmoke;
+    }
+    .up{
+        color: black;
+        background-color: blue;
+        font-size: large;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    }
+    .down{
+        color: black;
+        background-color: red;
+        margin-left: 892px;
+        margin-top: 10px;
+        font-size: large;
+        padding: 2px;
+    }
+
+
+  </style>
+  <body>
+    <header>Image Background Remover </header>
+    <nav class="top">
+        <a href="#">Home</a>
+        <a href="#">Features</a>
+        <a href="#">Login</a>
+        <a href="#">Sign Up</a>
+        <a href="#">Contact Us</a>
+    </nav>
+
+    <div class="port">
+        <img src="./resources/image3.png" alt="dog" srcset="" class="logo">
+        <form action="">
+            <div class="uplo">
+                <label for="filepicker">Select File : </label>
+                <input type="file" name="fileup" id="filepicker">
+                <button class="up" onclick="handleUpload()" type="button">Upload</button>
+            </div>
+        </form>
+        <button class="down" onclick="downloadFile()">Download</button>
+    </div>
+    <script>
+        let imageURl;
+        function handleUpload(){
+            const fileInput = document.getElementById('filepicker');
+            const image = fileInput.files[0];
+
+            const formData = new FormData();
+            formData.append("image_file",image)
+            formData.append('size', 'auto')
+
+            const apiKey = "CgVdcvyFJk4EGfMxBZB48sAL"
+
+            fetch('https://api.remove.bg/v1.0/removebg',{
+                method: 'POST',
+                headers:{
+                    'X-Api-Key': apiKey
+                },
+                body: formData,
+            })
+            .then(function(response){
+                return response.blob();
+            })
+            .then(function(blob){
+                console.log(blob)
+                const url = URL.createObjectURL(blob)
+                imageURl=url
+                const img = document.createElement('img');
+                img.src= url;
+                document.body.appendChild(img);
+            })
+            .catch();
+
+            console.log("clicked")
+        }
+        function downloadFile(){
+            var anchorElement = document.createElement('a');
+            anchorElement.href = imageURl;
+            anchorElement.download = 'edited.png';
+            document.body.appendChild(anchorElement)
+
+            anchorElement.click();
+
+            document.body.removeChild(a)
+
+        }
+
+
+
+
+
+
+    </script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/Background_Remover/resources/image3.png b/Background_Remover/resources/image3.png