Emojis with a white background

[juanra]

The emojis have a white background after applying the script. Do you know if there is a way to fix this?

[timea-techgirl]

@juanra The emoji itself is a picture with white background, can't change it.

[m4heshd]

Hi @juanra,

This issue has been raised multiple times on XDA and Reddit. Unfortunately emojis on the emoji tab are loaded to a canvas from one big WEBP with a white background. Actually multiple WEBP files according to the emoji category. So it's not fixable at all. I've tried. Really sorry about that.

Maybe somebody can recreate the WEBP file with a darker background so i can replace them via the script in the installation process.

[Slyther]

Hi,

So this got me curious and I started checking out the image assets on whatsapp, but I see like 4 or 5 different versions of each emoji group, in jpeg, webp, png, with backgrounds, without backgrounds, and even with slightly different emojis.

If I'm in the right place, then here's a couple of questions:

1. How do you know which ones are used in the emoji tab?
2. Wouldn't you be able to just grab the already existing versions without backgrounds and rename them to match the ones currently being used?

[m4heshd]

Hi @Slyther,

It's great that you're looking into this. What you're looking for is all the emoji WEBP files with a white background.

[juanra]

Thanks @timeakesmarky and @m4heshd for the context. I'm going to look for the WEBP file I will try to recreate it with the black background. I let you know my progress.

Do you know what path this file is in?

[m4heshd]

That's great to hear. Make sure the background color is #272c35 so the emojis will blend in with the app background. Let us know your progress.

[juanra]

Thanks @timeakesmarky and @m4heshd for the context. I'm going to look for the WEBP file I will try to recreate it with the black background. I let you know my progress.

Do you know what path this file is in?

Hi guys, do you know in which path I can find the emoji resources?

[mrillusi0n]

That's great to hear. Make sure the background color is #272c35 so the emojis will blend in with the app background. Let us know your progress.

I can try recreating with the specced bg color, but I was not able to find the original webp files. Could you please tell me where I can find them?

[Slyther]

@juanra @mrillusi0n you guys need to extract the files from the *.asar file for whatsapp. I guess the easiest way to get to that is by using the asar file from the backup folder. You need the asar node module to extract the assets off of the file. Syntax is as follows:

asar extract app.asar destinationfolder

The webp files are in the img folder. A search of *.webp will give you the files. Don't mind the ones without background as those are different sizes. I kinda gave up on this as I'm not sure how to modify webp files. The photoshop extensions I've tried have only corrupted the files, and there's like 400 files to modify, so a programmatic approach is basically necessary. The background eraser algorithm probably exists as an open source algorithm somewhere, so realistically, it should be possible... I'm just not sure where to start looking.

[mrillusi0n]

Thanks @Slyther. I think I can try doing it by Ps's Batch-Processing. I think it's better to make them transparent, rather than having #272c35 hardcoded, as @m4heshd said.

[m4heshd]

I have no idea why WhatsApp's doing this. If you take a look there are identical WEBP files with transparency for ones with a white background slightly differs in size and quality. Like 1 - 3 KB differences.

I'm all for improving render time, performance..etc. but that's just a huge waste of resources in my opinion.

@mrillusi0n, i suggested adding a bg because adding an alpha channel might change the behaviors a bit. But I would also like them to have a transparent background because any future modification to the color palette would be much simpler then.

[mrillusi0n]

@m4heshd Yeah, I did come across that. Right now, I've just filtered out the webp files. And nothing more. Is there a way you can load them from the png's? Because they are already transparent. I don't know, that might be a dumb suggestion.

[m4heshd]

PNGs can work but unfortunately styling for that particular part is dynamically generated via JS on runtime. So not possible to override that. It has to be the images.

[mrillusi0n]

@m4heshd Do you have any other platform for discussions? A Telegram Channel would be great.

[m4heshd]

Sure. Here's the one i just created.
https://t.me/wadarkmode
I'll add it to documentation later.

[mrillusi0n]

Sure. Here's the one i just created.
https://t.me/wadarkmode
I'll add it to documentation later.

You need to share us a group link where we can converse too. Only you can broadcast messages on there.

Edit: Sorry, it should have been a Public Group instead of a Telegram Channel, for discussions.

[m4heshd]

My bad. Not a Telegram user. 😁
Here's the link - https://t.me/wadarkmodechat

[m4heshd]

There's some progress but nowhere even near achieving the actual goal.

This is pretty much an impossible task but we don't have to lose hope.

[Slyther]

@m4heshd was this done purely with Photoshop batch? If we could find a way to do the image modification programmatically, this could be easily doable.

This can turn webp images into streams and buffers, we'd just need an image manipulation library, even a rudimentary one could realistically work. I'll start looking around.

[m4heshd]

@Slyther It's really good to hear that you're putting real effort into this. I did this on the source code level without dealing with images since it literally gave me migraines looking through thousands of white background images.

Still trying to do this on source level because there seems to be 100s of MBs worth images that we'll need to replace for it to work as intended. That's definitely going on the cons list if we do that. This shouldn't be this much of a struggle in my honest opinion. But since we have no choice, we'll work with the hand that has been dealt to us.

[NicolasPL64]

@m4heshd Man, you are the best!!

[m4heshd]

@NicolasPL64 I hardly believe that but thank you for the kind compliment. 😊

[m4heshd]

Issue is finally fixed on 73c4bdc. A big round of applause goes to @Slyther for his immense effort and bringing this to life 👏. Anyone can find his script which made this possible right here.

Also thanks to everyone who's been testing the changes on our Telegram group including @mrillusi0n. I'm keeping this discussion open for the moment in case of any further improvements and updates. Congrats everyone. This was a difficult one.. 🤘

[KeronCyst]

👏 This issue can finally be closed a month later, lol!