NodeJS - PNG to JPG Conversion when resizing - remove dark background

Wappler General Need Help
1

In a NodeJS application, users are allowed to upload images with jpeg, jpg and png file extensions. When saving original and resized images, all the images are saved with jpg extension instead of the original file extensions.

An image with the file extension png, when uploaded before resizing, displays as original even when saved with jpg file extension. But when the same image is resized and saved in jpg format, the transparent background in the png image is converted to a dark background.

Is there a way to remove this dark background in the resize and save step for png file extensions?

1 Like
2

Also wondering this…

3

To convert image, use nodejs sharp custom module . I have an example here

http://134.209.249.208/

I would have uploaded the module, but i am not near my pc right now

4

Anyway to remove a background programmatically?

Let’s say a white background

5

It should be possible, i haven’t tried it. So i am not sure.

Check this out

6

Thanks @Adetoyinbo1 for an example of the nodejs sharp module. I compressed a few images with png file extension to JPEG output format. The images, that have a white background, get converted to JPEG format with a white background.

If png images have a transparent background, then compression process adds a dark background, regardless of the output file extension.

7

I observe the the same, choose another format instead. You can try Webp

Screenrecorder-2022-01-11-10-12-39-788

8

Just tried Webp and it retains the original background. But this option is not available in Wappler’s in-built Resize step.

I am saving images with jpeg, jpg and png file extensions, both original and resized, in jpg output format. There’s no user input for format selection when uploading these images.

9

I will upload the custom module here, later in the day

11

A jpeg file doesn't support transparency, default it gets flattened with the black color. I can make it possible to allow you setting a different color instead of black for the transparent part.

Here an update, I've added background as an option to the save step. The background is only used when saving to jpeg and defaults to black. It will do nothing when the input image doesn't have transparency.

image.zip (2.6 KB)

12

Hi @patrick, thanks for adding an option to set a background colour in the Save Image Step.

I replaced the existing file in /lib/modules/ directory with the updated image.js file. But it’s not showing the new option to set background colour when JPEG format is selected.

I have restarted Wappler and Docker services a few times, but the updated option in Save Image step is still not displaying.

Screen Shot 2022-01-12 at 10.54.59 am
Screen Shot 2022-01-12 at 10.54.59 am882×339 39.8 KB

13

Hi @patrick, the updated image.js file is not showing background option in the Save Image step. Could you please guide me if I need to make any other changes for the new option to display? I’m using Docker on the local machine.

Thanks Patrick.

14

The UI update is not available yet, you can edit the json directly. Right click on the server action and select Open in Code View.

Your save step should look like:

{
  "name": "resizedAvatarImage",
  "module": "image",
  "action": "save",
  "options": {
    "instance": "image",
    "background": "#000000",
    "path": "/pictures/users/thumbnails//",
    "template": "{name}_thumbnail.jpg"
  }
}
15

Perfect. I have tested by editing the json directly and background colour is updating correctly for transparent backgrounds according to the hex value given.

Many thanks, @patrick, your help is greatly appreciated.

17

This has been implemented in Wappler 4.5

19

This topic was automatically closed after 30 hours. New replies are no longer allowed.