# Background from a picture

**URL:** <https://discourse.nodered.org/t/background-from-a-picture/48184>\
**Category:** General\
**Created:** [8 July 2021 18:35 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184 "2021-07-08T18:35:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [8 July 2021 18:35 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/1 "2021-07-08T18:35:37Z")

</div>

Hello!

Is there a way to remove the background from a picture?

Here's an example.

 ![trx5748](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c9d511ac7c995b3eb92114b0616f8b5f8541974.jpeg)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 July 2021 18:42 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/2 "2021-07-08T18:42:40Z")

</div>

at this point I think we need a category for truly random questions !

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [8 July 2021 18:44 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/3 "2021-07-08T18:44:40Z")

</div>

Here is a suggestion... and without background 😛

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/156738ef8164fb707e3d43898046f21af688dbd1.jpeg)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [8 July 2021 19:39 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/4 "2021-07-08T19:39:27Z")

</div>

Joking aside... and because, while not retired, I currently DO have more time than energy... I suspect the OP is looking for some JS code, preferably already in a "nicely wrapped node" that will take in an image and spit out same image minus background. Hey, it is only code, should be possible, right?

A little Googling shows that the answer may be \*Yes

\*_lots of background code, perhaps.in form of 3rd party services_

For example... I found this service/api (NO affiliation nor intent to advertise... just a result from Googling)...

> **[Background Removal API – remove.bg](https://www.remove.bg/api)**
>
> The simplest way to remove image backgrounds programmatically

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 July 2021 19:43 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/5 "2021-07-08T19:43:54Z")

</div>

Or if I’m Linux maybe an imagemagik call from an exec ? [How to replace white background color with transparent of an image in ImageMagick? - Stack Overflow](https://stackoverflow.com/questions/12424018/how-to-replace-white-background-color-with-transparent-of-an-image-in-imagemagic)

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [8 July 2021 19:48 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/6 "2021-07-08T19:48:07Z")

</div>

> [@Gunner](#):
>
> Joking aside... and because, while not retired, I currently DO have more time than energy... I suspect the OP is looking for some JS code, preferably already in a "nicely wrapped node" that will take in an image and spit out same image minus background. Hey, it is only code, should be possible, right?
> 
> A little Googling shows that the answer may be \*Yes
> 
> - _lots of background code, perhaps.in form of 3rd party services_
> 
> For example... I found this service/api (NO affiliation nor intent to advertise... just a result from Googling)...
> 
> [Background Removal API – remove.bg](https://www.remove.bg/api)

Hello!

Many thanks for the answer.

The side no me but they want enough money for it. 0.20 euros per picture.

Here is a site that is free but doesn't offer an API.

> **[PicWish AI Photo Editor | Free Online Photo Editing Tools](https://picwish.com/)**
>
> PicWish brings easy photo editing for you. Free to use! Use PicWish AI photo editor to remove background, unblur image, and do more image editing.

So I'm looking for another solution.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 July 2021 19:49 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/7 "2021-07-08T19:49:32Z")

</div>

Sorry to interrupt the excellent humour in this thread...

The closest thing to _ **background subtraction** _ in images I found, is the [node-red-contrib-camera-motion](https://github.com/thebigpotatoe/node-red-contrib-camera-motion) node. It does not have a readme page (yet), but you can see this in his Github repository:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac496149939e722e755b0f8ad79d7d1a84ad99d4.png)

There is also a possiblity to use Tensorflow.js for this purpose (see e.g. [here](https://jmlbeaujour.medium.com/real-time-matting-of-webcam-video-on-the-browser-part-1-2c71a330ed08)).

Bart

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [8 July 2021 19:50 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/8 "2021-07-08T19:50:16Z")

</div>

> [@dceejay](#):
>
> Or if I’m Linux maybe an imagemagik call from an exec ? [How to replace white background color with transparent of an image in ImageMagick? - Stack Overflow](https://stackoverflow.com/questions/12424018/how-to-replace-white-background-color-with-transparent-of-an-image-in-imagemagic)

Many thanks for the answer.  
I've tried it with imagemagick, but unfortunately that doesn't look so nice.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [8 July 2021 19:50 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/9 "2021-07-08T19:50:41Z")

</div>

I had also came across this - [Cloudinary - Pricing and Plans](https://cloudinary.com/pricing)

From here - [Remove Photo Backgrounds with Cloudinary](https://davidwalsh.name/remove-photo-backgrounds-cloudinary)

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [8 July 2021 20:00 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/10 "2021-07-08T20:00:02Z")

</div>

> [@Gunner](#):
>
> [Cloudinary - Pricing and Plans](https://cloudinary.com/pricing)

With Cloudinary - Pricing and Plans, only 3 images per month are free.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [8 July 2021 20:02 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/11 "2021-07-08T20:02:29Z")

</div>

Well, depending on the imagery, you are asking for some relatively serious processing power for hopefully good results... so close to free may be all you get short of coding it yourself.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 July 2021 20:08 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/12 "2021-07-08T20:08:44Z")

</div>

You can also use opencv.js, which has support background subtraction via the BackgroundSubtractorMOG2 algorithm (see [here](https://docs.opencv.org/4.5.2/de/df4/tutorial_js_bg_subtraction.html)). And in this link [you](https://docs.opencv.org/4.5.2/dc/de6/tutorial_js_nodejs.html) can find an example of how to run opencv.js (which is a WASM port of OpenCv) in NodeJs.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 July 2021 21:28 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/13 "2021-07-08T21:28:56Z")

</div>

Here is a client side demo...

> [@HTTP endpoint for image payloads](https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598/4):
>
> Hi, firstly, as you are not using dashboard (you are pretty much building a website from endpoints) you have to include html/head/body tags) Ok, so since this is all client side, you need to post the data back to your 2nd endpoint. for this I simply used fetch. Also, as that P5 library generates its results on a canvas, you need to call .toDataURL() on the canvas to get the base64 data. If you want to save this as an actual image, you should convert the base64 to binary. NOTE: Image tools h…

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [8 July 2021 21:42 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/14 "2021-07-08T21:42:43Z")

</div>

> [@HTTP endpoint for image payloads](https://discourse.nodered.org/t/http-endpoint-for-image-payloads/42598/4):
>
> Hi, firstly, as you are not using dashboard (you are pretty much building a website from endpoints) you have to include html/head/body tags)
> 
> Ok, so since this is all client side, you need to post the data back to your 2nd endpoint. for this I simply used `fetch` . Also, as that P5 library generates its results on a canvas, you need to call `.toDataURL()` on the canvas to get the base64 data.
> 
> If you want to save this as an actual image, you should convert the base64 to binary. NOTE: Image tools has a `write` function to take the worry out of the format etc.
> 
> anyhow, here you go...

Hello!

Many thanks for the answer.

But unfortunately it doesn't happen when you click on inject

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 July 2021 21:51 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/15 "2021-07-08T21:51:01Z")

</div>

> [@madmax](#):
>
> But unfortunately it doesn't happen when you click on inject

No. As I said, it is a client side demo. You need to open the endpoint `/image_payload` (e.g. [http://localhost:1880/image\_payload](http://localhost:1880/image_payload) or whatever your node-red is)

May or may not be of use - depending on what your goal is

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [9 July 2021 08:18 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/16 "2021-07-09T08:18:39Z")

</div>

> [@Steve-Mcl](#):
>
> No. As I said, it is a client side demo. You need to open the endpoint `/image_payload` (e.g. [http://localhost:1880/image\_payload](http://localhost:1880/image_payload) or whatever your node-red is)
> 
> May or may not be of use - depending on what your goal is

Hello!

Thanks for the answer.

Can this also be built into the flow? Which he converts several images at once.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 July 2021 08:20 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/17 "2021-07-09T08:20:34Z")

</div>

Probably not. (or not so easily) as I said, it was a client side demo and I had no idea of your usage. It seems you want to automate things at server side.

OpenCV or a command line application is probably the way to go.

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [9 July 2021 08:33 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/18 "2021-07-09T08:33:31Z")

</div>

OK thanks

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [9 July 2021 09:31 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/19 "2021-07-09T09:31:57Z")

</div>

As I suggested originally - to do it locally a command line like linux's imagemagik like this may do it on pi etc.

```auto
convert input.jpg -fuzz 30 -fill none -draw 'color 1,1 floodfill' output.png`

```

basically that command take the pixel at 1.1 (top left) and assumes that is the background colour - with a fuzz of 30 so anything close is also background - and make them all transparent.  
Note your original image is a jpeg that doesn't support transparency so this converts it to a png.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/34570ec66b6ec519e6631776c980b958615790b9.png)

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [9 July 2021 22:01 UTC](https://discourse.nodered.org/t/background-from-a-picture/48184/20 "2021-07-09T22:01:40Z")

</div>

I understood that the OP wanted the backgrounds removed (AKA whitened out as per example) not turn the background into a transparency. Isn't that two different processes, or at least one must come before the other to work effectively.

[Next page](https://discourse.nodered.org/t/background-from-a-picture/48184.md?page=2)