Hello!

While watching the I/O's "Material now" presentation this year I've noticed that from an album art they got the primary/accent color using Palette.

When I tried to do the same using vibrant.js the colors they got are nowhere to be found.

Is it just a further post processing provided by the player app or should vibrant.js return the right colors using the Material Pelette?

Hi,

I'm trying to use vibrant.js with masterslider.
The "issue" is that Masterslider uses data-src attributes

<img src="images/blank.gif')" data-src="path-to-my-image" alt="alt text">

I'm only able to retrieve blank.gif

This is a bug I found after reviewing the code only, not when running it. While the documentation says zero is the maximum quality, the below loop does not proceed with it, it needs a minimum value of 1 to continue the loop.

  allPixels = []
      i = 0
      while i < pixelCount
        offset = i * 4
        r = pixels[offset + 0]
        g = pixels[offset + 1]
        b = pixels[offset + 2]
        a = pixels[offset + 3]
        # If pixel is mostly opaque and not white
        if a >= 125
          if not (r > 250 and g > 250 and b > 250)
            allPixels.push [r, g, b]
        i = i + quality

I am trying your library with this image and the colors does not look right, especially the yellow color. Could you please explain to me why this happen?

It looks like this is licensed MIT, but it's not specified in the license.md. Is this project MIT licensed?

hello,
i find vibrant.js will set a global variable index

https://github.com/jariz/vibrant.js/blob/master/dist/Vibrant.js#L143

i think this can fix it

// https://github.com/jariz/vibrant.js/blob/master/dist/Vibrant.js#L134-L152
        count: function(force) {
            var vbox = this,
                histo = vbox.histo;
            if (!vbox._count_set || force) {
                var npix = 0,
                    i, j, k, index;  // add index here
                for (i = vbox.r1; i <= vbox.r2; i++) {
                    for (j = vbox.g1; j <= vbox.g2; j++) {
                        for (k = vbox.b1; k <= vbox.b2; k++) {
                            index = getColorIndex(i, j, k);
                            npix += (histo[index] || 0);
                        }
                    }
                }
                vbox._count = npix;
                vbox._count_set = true;
            }
            return vbox._count;
        },

sorry that i don not know coffee js

This is awesome, is it on any CDNs?

It would be great if it was possible to save the an image using the palette of the clustered colors. Something like the first image here:
https://making.lyst.com/2014/02/22/color-detection/

Regards
Ben

I'am using vibrant.js with angular 4 , and exprience an issues that the canvas didn't removed from the body

and i call it like that
`

let v = new Vibrant(changes.toPlayRadio.currentValue.pic);
v.getPalette((err, palette) => {
  var rgb = palette.Vibrant.getRgb()
  this.radioBackground =
  {
    'background' : 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+');'
  }
});

`

Hi, default params with this image:
https://www.facebook.com/photo.php?fbid=10107296866472911&l=bb741fb5ef

Generates these results:

It would be nice to auto detect if an image is B&W and only generate a palette on the grayscale.

Security Dom exception 18. Not much revealed in the error reports received by analytics. Can you help me track it more?

This is the only project I could find for extracting vibrant colors. And it seems to do it just right!

I'm trying to implement something similar in python but can't read coffeescript. Can you outline the algorithm you use for extraction? It'd massively help anyone trying to port it.

Thank you.

I'm trying to use Vibrant in a ReactJS app, so I'm using the node-vibrant package.

'use strict';
var React = require('react'),
    Vibrant = require('node-vibrant');
var ImageListItem = React.createClass({
  onImageLoad: function(e) {
    var img = e.target;
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches();
    // gets printed with DarkMuted: undefined, DarkVibrant: undefined, 
    // LightMuted: undefined, LightVibrant: undefined, Muted: undefined, 
    // Vibrant: undefined
    console.log('swatches', swatches);
    for (var swatch in swatches) {
      if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
        // this output never happens
        console.log('swatch', swatch, swatches[swatch].getHex());
      }
    }
  },
  render: function() {
    var url = 'some-image.jpg';
    return (
      <p>
        <img src={url} onLoad={this.onImageLoad} />
      </p>
    );
  }
});
module.exports = ImageListItem;

Am I doing something wrong? My package.json has "node-vibrant": "^1.1.1" in its devDependencies. This is following the tutorial on http://jariz.github.io/vibrant.js/

simple fix: npm install --save del

The current Vibrant release gives an error like this.

Vibrant.js:651 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at new Vibrant (Vibrant.js:651)
    at workList.js:89
    at Array.forEach (<anonymous>)
    at workList.js:86
    at <anonymous>

Where the code calling Vibrant is

const image = new Image(200, 200);
            image.src = item.fields.image.fields.file.url;
            const vibrant = new Vibrant(image);
            const swatches = vibrant.swatches();
            alert(swatches[0].getHex());

Shows "Cross-origin image load denied by Cross-Origin Resource Sharing policy" while loading images from database.

I'm including Vibrant in my project using JSPM. I get the following error
Error: Error loading "quantize" at file:/path/to/project/folder/quantize.js

Do you know what might be the issue?

This is a really neat project, is there a decent way to detect if vibrant.js will work on a page?

I'm thinking in browsers that don't support canvas etc there could be a flag set so you can feature detect and such.

For this image, Vibrant completely misses the blue:

Hello,

Is it possible to use a div background image as the source for the the image?

Thank you.

Causes Firefox and Chrome to grind to a complete halt :\

"But why would you hide the image that you're trying to accentuate I don't even what"

I'm doing some dynamic styling in the browser and I was hoping to hide the image element itself, using it only as the source to script in a background-image with background-size: cover and dynamic background/text overlay color values (provided by Vibrant.js)

But that's besides the point, checking the image dimensions or display properties before copying the image to a new canvas element might be a good idea idk

Love the library, ran into this just now, thought I'd say something =)

Hi friend!

I'm working on getting this into my project (as it is the missing link to getting working; thank you so much!) and I noticed it's not published to npm. I'll probably work it so I can use it personally as an npm module; do you have any interest in using the UMD format so that your module can be consumed by both Bower and npm users?

Currently, the demo site is a pretty good example for this: if you change the size of your browser, the palette will change.
This is of course caused by the image size changing, and because of Vibrant not loading every single pixel (only the 5th, each time, by default, as configured by the quality parameter)

For more consistent results, Vibrant should resize the image to a default set max size before getting swatches from it.
Maybe even instead of grabbing every fifth pixel, it should grab every pixel when it's downscaled. (unless performance takes a hit)

Palette does this as well.

Is it possible to use this great tool on images from another domain?
of course after they have been loaded.

When I run a test using Vibrant.js on just a single solid color jpeg, the output color is incorrect.

Test was performed using this Fiddle: http://jsfiddle.net/oskar/3479gj9e/light/

Color used for test:

Hex #313788

Output Colors:

Circle 1:
Hex #343c8c

Circle 3:
Hex #383c8c

By default, doing a bower install (as per your build steps) doesn't bring down the compiler at bower_components/closure-compiler/lib/vendor/compiler.jar like the gulp file refers to. This means the build steps are currently broken without updating the gulpfile manually.

Trying out vibrant.js in the jsfiddle on the webpage fails, returning the follow error:
/TypeError: cmap.vboxes is undefined

Edit: just noticed the disclaimer regarding image dropping only working in Chrome. Why is this the case?

Hello, is there a way to do the processing asynchronously?