Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Background removal with No Code & Bubble.io

Learn how to remove backgrounds from images in your Bubble.io app effortlessly with this step-by-step guide, showcasing the power of no-code development.

How to Remove Background from Images in Your Bubble App

Here's how you can remove the background from your images in your bubble app, just like this website here. And I'm going to be showing you how I've built this simple page and API connection to remove the green background from this image of me, one of the images that we use on our videos.

Setting Up the API Connector

And if you want to see more videos like this then click the link down in the description because we've got hundreds of Bob tutorial videos just like this one. But I'm going to dive right in now into the API here. So I've signed up for an account with these guys and then I've gone into their API documentation and I've looked for their image file Curl and I've taken what they've got written here and translated that into the bubble API connector.

Authentication and Adding API Call

So I've added the bubble API connector, I've added the name remove BG and then I have to authenticate because it's like a password, it's how vast. Use the service a lot. They'd want to know who to bill, which account. So I add the private key in header if it's got this name. And here's my key value which I'll be deleting as soon as I publish this video.

And then I go ahead and I add an API call and so I can name this anything I like. I've said upload and process. I've set it as an action and the data type as image. Now in 99% of my demonstrations with the bubble API connector, this is set to JSON because we get a load of text data in JSON code back. But actually this API in some ways is nice and clean.

Form Data Parameters

It just responds back with the processed image. Then I need form data. Again, most of the time we use JSON, but in this case we use form data. And then I have the parameters image file and I set that to be send file and I've got all of that from this documentation here, which is here's the end point. And then I've actually not added in the size parameter, doesn't need it, but we can see that this goes in the header.

Sending the Image File

Just explain that. And then we have image and then the file. Now you can do this two different ways. You could just point at an image URL and you could do that just as easily with bubble. But I've gone with image file because the image might not be a public image if you've got the right privacy rules set up around uploading files and images and attach files and your privacy rules.

Initializing and Displaying the Processed Image

Then your images even if you were to direct link to them may not be accessible. And so this third party service wouldn't be able to pick the image up from the URL. So we're actually just sending the file instead. We're not saying look here, here's the file. We're saying here's the file.

Okay, then let's dive in a little bit deeper. I had to initialize it by uploading a file here and I got no errors. And so it's successfully initialized. That means that I can go onto my page and my page is called image demo.

Custom State and Image Uploader

And on the page I have a custom state that I've got processed image and it's of type image because I want to be able to display the results by adding an image element to my page and saying go to my custom state and show the processed image.

It's just my way of recording it without necessarily saving the image to my database. Now the image is not saved to a field in my database, but the image will take up space in the file manager of my bubble app. So I am still taking up space of my bubble app quota by doing this to the image. I've then got an image uploader and I've got a button. So let's have a look.

Running the API Call

When the button is clicked, I run my API call. Now I see this in here and if I wanted to find it again, I could go into plugins and search for my remove background. And so it's remove background, upload and process. And that's just because that's exactly what I've named it. Okay, so yours may be different.

Conclusion

Then I say take the result of step one and set the state. So I'm populating the custom state with the image and the end of all of that, and it literally just takes seconds to do, is a rather quick and impressive background removal tool built completely with no code, using background removal API. And combining that with my bubble app, our channel.

Latest videos

crossmenu