Hello! Welcome to Tech Ankur.
If you are looking for Background remover tool then this post is just for you.
Introducing the ultimate background remover tool! Easily remove image background in just seconds with a simple and efficient interface.
What is Background Remover tool
A background remover tool uses artificial intelligence (AI) to remove the background from an image. The tool can leave the main subject of the image intact, allowing you to replace the background with a new one or leave it transparent.
Photo editing – Creating transparent backgrounds for product images, logos, or graphic design.
How to Use:
- Upload an Image – Choose the image you want to edit.
- Remove Background – The tool will process and remove the background automatically
You can see the demo here⤵
Easy Steps To Add a Background remover tool
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click nav-bar.
Step 3: Go to the page/post or place which you want to add Background remover tool
Step 4: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view
Step 5: Now paste the following Code to that place
Steps to Get Remove.bg API Key
-
Step 1: Sign Up on Remove.bg
Go to the Remove.bg website.
If you don't have an account, click on the "Sign Up" button to create one. If you already have an account, simply log in.
-
Step 2: Get Your API Key
After logging in, go to your Account Dashboard or Settings page.
Look for the API section where you will find your API Key. Copy this key as you will need it for integration.
-
Step 3: Use the API Key in Your HTML Code
Use the API key in your HTML by making an API call to Remove.bg. Below is an example code to use your API key:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Remover</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<div class="row mt-4">
<div class="col-md-12 card mt-4">
<form>
<div class="form-group">
<label for="fileInput">Select a File: </label>
<input id="fileInput" class="form-control"
type="file">
</div>
<input class="btn btn-primary m-1"
type="button" onclick="submitHandler()"
value="Upload">
</form>
<button class="btn btn-warning"
onclick="downloadFile()">
Download
</button>
</div>
</div>
</div>
<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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
let imageURL;
function submitHandler(){
console.log("click");
const fileInput = document.getElementById('fileInput');
console.log(fileInput.files);
const image = fileInput.files[0];
// Multipart file
const formData = new FormData();
formData.append('image_file', image);
formData.append('size', 'auto');
const apiKey = 'YOUR_REMOVE_BG_API_KEY"';// Replace with your actual API key
fetch('https://api.remove.bg/v1.0/removebg',{
method:'POST',
headers: {
'X-Api-Key': apiKey
},
body: formData
})
.then(function(reponse){
return reponse.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();
}
function downloadFile(){
var anchorElement = document.createElement('a'); //<a></a>
anchorElement.href = imageURL;
anchorElement.download = 'naciasv.png';
document.body.appendChild(anchorElement);
anchorElement.click();
document.body.removeChild(anchorElement);
}
</script>Step 6: Then Save or Publish.
That's done!
If you face any problem then join our Tech Ankur Group
Copyright:
©Tech Ankur