jariz / vibrant.js

Extract prominent colors from an image. JS port of Android's Palette.

Home Page:http://jariz.github.io/vibrant.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Swatches always undefined

cheshire137 opened this issue · comments

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/

Never mind! I found the instructions on https://www.npmjs.com/package/node-vibrant and they work. I made https://github.com/moneypenny/instavibrant -- thanks!

commented

Hey, Cool project! Glad you worked it out.