🎨 A simple library for extracting dominant colors from images.

Hello! Recently I've used RGBaster in a project and had some performance issues. In my case, the images processed were a bit big and I couldn't resize them because that would brake the layout.

As I dug deep debugging the page trying to find ways to optimize the script I've changed the image data loop to iterate skipping from 4 to 128 pixels and obviously, got a considerable increase in the performance. No more long frames and in my case no impact on the results.

My suggestion is to provide a way to decrease precision so we can gain on performance when needed. It might help a lot in some cases and be of great help for other developers.

If needed, I can provide some measurements and some examples for testing purpose.

I have a png image, and when I use the RGBaster to get the color of this picture, I get only black, whether it's dominant, secondary or palette. I do not know where the problem is. I put my png image into an attached file.

Implements a fix to ensure colours are unique. In addition it implements ideas proposed by @buffcode in the #12 discussion such that at the end of the process we sort the variable colorCounts and return the 1.. items (thus dropping the dominant colour).

The implementation of the new helper functions and return values also make it easy for others should they wish to amend the palette’s behaviour.

helper functions:

• mapPalette: changed to handle the colorCounts transformation to the desired array of objects which is then sorted in descending order.
• fitPalette: fits the colors to the desired outcome size (eg. 10) by either cutting the palette down or filling the remainder with a default value.
• frmtPobj: formats the object the way we like it with 2 properties.

I am attempting to use this based on your instructions and first have arrived at an error message regarding an improper header. Perhaps I am missing something obvious so I just wanted to encourage anyone to elaborate in the readme i.e. mention any requirements and more of a step-by-step instruction if possible for someone newer to node in general and unfamiliar with typescript.

I have installed the package and am attempting to run function in a script within an html file.

Hi, thanks for your awesome module!

I've installed the node module with npm install rgbaster and now want to import the node module in one of my js files. But there is not just a single function I can reference.

Here is my Code:

import rgbaster from './rgbaster';

RGBaster.colors(img, {
  success: function(payload) {
    // You now have the payload.
    console.log(payload.dominant);
    console.log(payload.secondary);
    console.log(payload.palette);
  }
});

Thanks for the help!

microbundle uses rollup under the hood with support for typscript and flow, it is designed for small libraries like this and configured for different build targets. This would allow for a simplified build process, fewer dev dependencies and configurations, and multiple build targets (umd, cjs, mjs) with better minification (using terser). This PR also cleans the src directory from unecessary files.

this branch contains a few performance wise edits:

1. the loop inside getCounts would continue early for transparent colors and undefined data without the need to create the rgba array for that iteration.
2. the rgba array is created ~~with the getRgbComponents function~~ inline (with length of 3), to avoid the costly Array.from() that creates an unnecessarily big array on each iteration.
3. reusing existing objects for colors in the countMap instead of creating new ones for every pixel ( 84c1bda725ff56dcc337c172e55a19b090cc5500)

Hello, I tried to install via npm npm install git://github.com/briangonzalez/rgbaster.js, but it trips up on the symlink'd package.json and says it cannot be found and errors out. Any chance of separating the package.json from bower.json (or possibly reversing the symlink?) to make this possible?

And also would be neat to have it up on npm registry as well.

Thank you!

Hi,

We need a test case for the promise being rejected.

The basic structure should follow something like the below. I'm also curious why the errorHandler source code returns a simple string and not an error object. What's the thinking on that?

const promise = new Promise((resolve, reject) => {
    reject(new Error("Something awful happened"));
});
promise.then((res) => {
    // This is never called
});
promise.catch((err) => {
    console.log('I get called:', err.message); // I get called: 'Something awful happened'
});

As always, looking for some insight here before I supply a pull request.

Hi,

There is a missing test for ignoring a color. Going by the already existing tests I would suggest something like the below:

it('ignores a given color for images with a source', async () => {
  const img = 'http://localhost:9080/dominant-red-secondary-green.png'
  const ignoreColors = [ 'rgb(255,0,0)']
  const result = await analyze(img, { ignore: ignoreColors })

  expect(result[0].count).toEqual(25)
  expect(result[0].color).toEqual(green)
})

Thoughts?

👋Hey everyone!

First off, I am excited to let everyone know that version 2 of rgbaster is on the way. Super huge thanks to all of those who have PR'd and helped maintain, especially @AlfredJKwack.

Here's my plan of attack:

• [x] Complete re-write in Typescript
• [x] Improve build process
• [x] Setup TSLint using standard
• [x] Clean up APIs and rename internals that were poorly named by my past self (darn that guy)
• [x] Setup CI in ~~Buildkite~~ Semaphore
• [x] Create robust test suite in Jest
• [x] Port #30 over to the new rewrite.
• [x] Audit modules which are no longer used or pose a security risk
• [ ] Autopublish module
• [x] Close currently open issues and say thanks/sorry

My goal is to make a more robust repo that is "easier" to come back to after time away.

Stay tuned.

Hello, I'm wondering if there is an easy solution to my problem.

I'd like to ignore all rgb colors above rgb(180,180,180).

If this would be possible in any way, would this still be doable performance-wise?

Hi everyone,

We just updated our projecto to TypeScript ^4.0.3 and we getting the following error:

Can anyone help us reach a solution ?

Thanks guys.

Hi,

Functionally, what is the difference between the following two?

TS code from v2

  if (src.startsWith('data')) img.crossOrigin = 'Anonymous'

and

JS code from v1

    if ( imgSrc.substring(0,5) !== 'data:' )
      imgObj.crossOrigin = "Anonymous";

Unless I'm mistaken - which to be honest is quite possible after a long day's work - Version 2 of RGBaster has inverted the test for CORS handling of data url's.

I think formatting code using prettier.js would be a good addition to the build system, with less choices (opinionated formater), ensuring everyone's contribution looks the same (upon commit using commit hooks). what do you think @briangonzalez @AlfredJKwack ?

I am trying to use analyze function at version 2 to get dominant color of an image, but the call blocks my UI and make a long-time no response in browser. My code is below and runtime is Angular 7.

import analyze from 'rgbaster';

// lifecycle callback
async ngAfterViewInit() {
    const result = await analyze('../../assets/images/1542072554094.jpg');
    console.log(result);
 }

I am also trying to install rgbaster.js and import analyze from 'rgbaster.js', but it don't works. I learned that the version 2 of rgbaster was written in typescript, so i think there is no any problem to using this library in Angular framework. But I hava no idea about that the analyze function doesn't work and block ui Thread and raise a crash to browser.

Thanks for your any replies!