Is App Inventor able to remove the background of a picture?

Is App Inventor able to remove the background of a picture?
MIT App Inventor Help
extensions
,
faq
ygs2307
October 14, 2023, 2:49am
#1
Does app inventor have functions that removes background of photo?
Like,
Take a photo -> remove background -> classify
Anke
October 14, 2023, 8:12am
#2
This is not an AI2 related question, but a general one about image processing.
SteveJG
October 14, 2023, 12:50pm
#3
ygs2307:
Does app inventor have functions that removes background of photo
No. App Inventor cannot remove photo backgrounds. Several extensions can be used to classify images
TIMAI2
October 14, 2023, 10:43pm
#4
Remove Background From Image with remove-bg
ygs2307:
Does app inventor have functions that removes background of photo?
As indicated above, this is not a native function of AppInventor, it is possible to do it though….
You will need:
your app to have a network (internet) connection
an account, and therefore an API key, with
https://www.remove.bg/
The
WebViewExtra extension
The
KIO4_Base64 extension
a suitable html file (see below)
HTML
DOCTYPE html
html
meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

body

form
input type=”file” id=”filepicker”
br
br
br
br
input type=”button” id=”upload” value=”Remove Background and Download File” onclick=”handleUpload()”
/form
br
br
script
let imageURL;

function handleUpload() {

const fileInput = document.getElementById(‘filepicker’);
const image = fileInput.files[0];
const filename = fileInput.files[0].name;

const formData = new FormData();
formData.append(‘image_file’,image);
formData.append(‘size’,’auto’);

const apiKey = window.AppInventor.getWebViewString();

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){
const url = URL.createObjectURL(blob);
imageURL = url;
const img = document.createElement(‘img’);
img.src = url;
document.body.appendChild(img);

var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
window.AppInventor.setWebViewString(filename + “, ” + base64data);
}
})
.catch();
}
/script
/body
/html
BLOCKS
blocks (1)
897×640 78 KB
INSTRUCTIONS
Copy the above html and save it to a file, I called it
wvremovebg.html
. Upload this file to your aia project to the media folder
Import the two extensions, and drag then onto your project
Drag out a webviewer component
Create blocks as shown above
NOTES
Files can be selected from shared folders such as Download, Documents, Pictures, DCIM/Camera
Files are saved, using the original filename, prefixed with
no-bg-
, to the ASD
1 Like
How do you convert this curl request to blocks?
Why am I able to import a picture with no background?
Home
Categories
FAQ/Guidelines
Terms of Service
Privacy Policy
Powered by
Discourse
, best viewed with JavaScript enabled