Automate Product Photo Background Removal with Node.js and Bannerbear
🐻 Try Bannerbear for free: https://bannerbear.com (https://bannerbear.com/)
In this tutorial, you'll learn how to automate product photo background removal and branded template rendering using the Bannerbear API — all in a single API call. No image editor required.
We cover:
• How Bannerbear handles AI background removal inside the render pipeline
• Setting up your template with AI background removal, subject detection, and auto-zoom
• Writing a Node.js script to generate branded product images from raw photos
• Scaling up to process an entire product catalog concurrently with Promise.all
• Using the Batches API to create up to 100 images in a single request
Perfect for developers building e-commerce automation, marketing image pipelines, or any workflow where you need to go from raw product photos to polished, branded visuals at scale. The same approach works in Python, Ruby, or any language with an HTTP client.
● Sign up for a free Bannerbear account:
https://app.bannerbear.com/ ● Duplicate the tutorial template:
https://app.bannerbear.com/v5/p/4gExeNl5lX45M1G2oK ● Batches API documentation:
https://developers.bannerbear.com/v5/-v5-batches
Video Transcription
[00:00:00] Welcome back, developers. If you're building for an e-commerce team, you've probably been handed this request before: can we automate the product photos? Manually removing the background from a product image is simple, but when the catalog hits thousands of SKUs, it becomes the bottleneck. Luckily, this is a problem automation can solve easily, and that's exactly what we're going to build today with Bannerbear.
We're not just automating the background removal, but we're also rendering the product onto a branded template automatically, all in a single API call. The end result is a finished branded marketing image that's ready to use as is on your website, emails, or social media campaigns. All you need is Node.js installed and a free Bannerbear account.
Let's jump into it.
[00:01:00] Before we write any code, let's quickly understand what this feature actually does. In Bannerbear, background removal happens inside the render pipeline itself. So instead of removing the background beforehand and uploading a pre-processed image, you just pass your original image URL to the API, and Bannerbear handles everything.
All it needs is for AI background removal to be enabled in your Bannerbear template editor, like you see here. With this enabled, you can take a raw product photo straight from a supplier or a camera upload and render it onto a polished branded template like this without ever touching an image editor.
First, let's set up the template and get our API credentials. To
[00:02:00] keep things simple, grab the template link in the description below and duplicate the exact template we're using in this tutorial to your own Bannerbear project. That way, your results will match what you see in this video. Of course, if you'd rather design your own, you can create one from scratch in the template editor.
Just make sure you apply the same settings I'm about to show you. In your template editor, make sure AI background removal is set to enabled. Then, set AI detect to subject and AI detect zoom to auto. This makes sure that the product is always centered in the image after the background is removed, no matter where it was positioned in the original photo.
Next, we need two things to call the API: the template ID and an
[00:03:00] API key. You'll find the template ID right here in the top right corner of your template page. For the API key, go to developers, API keys, and create a new one. Copy both values. We'll add them to our project's .env file later. Now, let's write the Node.js script that generates our image, and since these are just straightforward HTTP requests, the same approach also works in Python, Ruby, or any language with a HTTP client.
In your terminal, create a new folder for the project and navigate into it. Then, initialize a new Node.js project and install dotenv to manage our credentials.
[00:04:00]
Create a env file in the root of the project and add the API key and template ID that you copied earlier
Now create a file called generate.js and add this code. Pause the video if you need to. Let me break down what's happening here. In the request body, we're sending two things: the template ID and an object containing modifications we wanna make to the template. Each object in the objects array targets one layer in our template by its name, and the other properties define what we're changing onto it The first object targets product container, which is the image container layer.
We set its background image
[00:05:00] property to our raw product photo URL. This is the image the AI strips the background from and centers. The second object targets the product name text layer. Set its text to UV protector cream and its color to this pink hex code. Any layer we don't include in the array simply renders with its template defaults.
And outside the body, the authorization header carries our API key as a bearer token. That's what authenticates the request. We're also calling the sync endpoint instead of the regular endpoint. This holds the connection open until rendering is complete, and returns the finished image object directly in the response.
So there's no polling another endpoint to get the result. And at the end, we print the finished image URL
[00:06:00] from renderedimage.files.jpg. Now let's run it. You'll see the final URL printed in the console when it's done. Let's open it up As you can see, the background is removed and the product is perfectly centered sitting on the branded template, and we did it all from one API call.
Now let's scale this up for a bigger catalog. Instead of processing images one at a time, we'll loop through a list of products and fire the requests concurrently. We'll wrap everything in Promise.all and collect all the results in one go. Here we've got a products array. Each entry has a name and a raw image URL.
The renderProduct function makes the same API call as before, but now
[00:07:00] everything is dynamic per product. Each product's image URL goes into the background image property, and its name goes into the product name text layer. So every rendered image gets the correct product name on it automatically When the request resolves, we return the product's name along with the finished image URL from renderedImage.files.jpg.
Then, in the main function, we kick off all the renders at the same time in a Promise.all function. And once everything's done, we print out each product name with its final image URL. Alternatively, you can also use the Batches API. It creates a batch of up to 100 images in a single request, and each item in the items
[00:08:00] array follows the same schema as the image API.
And that's it. With Bannerbear, background removal, subject detection, and centered framing are all taken care of in a single API request to produce a polished, branded visual. If this saved you or your design team some hours, do me a favor, smash that like button, drop a comment with what you'd want to automate next, and subscribe so you don't miss the next automation tutorial.
I'll see you in the next one.
