[Web] different color detection on mobile browser vs desktop

[nandorojo]

Bug

Mobile browsers and desktop browsers return a different set of colors for the same image. I'm not sure if this is a bug with node-vibrant or this library's Web approach. My guess is it's node vibrant?

Take this image:

On a desktop browser, I get these colors, which seem relatively correct. They're essentially grays.

{
  "dominant": "#3c3c3c",
  "vibrant": "#7f7f7f",
  "darkVibrant": "#424242",
  "lightVibrant": "#bcbcbc",
  "darkMuted": "#3c3c3c",
  "lightMuted": "#acacac",
  "muted": "#7c7c7c",
  "platform": "web"
}

However, on a mobile browser (Chrome or Safari on iOS), I get these colors:

{
  "dominant": "#443c3e",
  "vibrant": "#3fbf7f",
  "darkVibrant": "#040c08",
  "lightVibrant": "#9bddbc",
  "darkMuted": "#443c3e",
  "lightMuted": "#b4bcb4",
  "muted": "#847c81",
  "platform": "web"
}

Environment info

Library	Version
react-native-image-colors	1.5.0

Steps To Reproduce

1. Use this image URL: https://res.cloudinary.com/dn29xlaeh/image/upload/q_75,w_640/v1/beatgig-live/quhilykqgarpqnf9peyk
2. Get the colors on a mobile browser
3. Get the colors on a desktop browser

Describe what you expected to happen:

1. The colors on both platforms should be the same.

Reproducible sample code

Here is a reproducible snack: https://snack.expo.dev/@beatgig/thankful-almond?supportedPlatforms=web

These are the colors it comes up with on a desktop browser:

Meanwhile, here it is on a mobile browser (you'll have to turn your phone sideways to see it on Snack)

[nandorojo]

The issue is node-vibrant. I added that to the snack. It gets the pallet differently on mobile and desktop browsers. Not sure what could cause that.

[nandorojo]

I opened an issue on node-vibrant: Vibrant-Colors/node-vibrant#132

[nandorojo]

I ultimately decided to call the function from a server to always get consistent results. Bummer cause it's slower, but it works that way.

[osamaqarem]

I do wish to explore if this library could be re-written to wrap another C++ library for image color extraction using JSI and WASM for web. I think this is the last resort to unify results for all platforms. Just need to find the time since I have no experience with all of that and would have to explore if its doable.