Skip to content

Commit

Permalink
Image Background Remover
Browse files Browse the repository at this point in the history
  • Loading branch information
Anirudh99N committed Aug 10, 2023
1 parent 7c4d99c commit 9b2fb82
Showing 1 changed file with 136 additions and 136 deletions.
272 changes: 136 additions & 136 deletions Background_Remover/main.html → Background_Remover/index.html
Original file line number Diff line number Diff line change
@@ -1,137 +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>
<!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>

0 comments on commit 9b2fb82

Please sign in to comment.