vibrant-colors / node-vibrant Goto Github PK

Extracting the swatches is just half of the puzzle. Usually we need to display some text content over the background colored with the extracted swatches. There is a deterministic way to determine whether the text color should be white or black to ensure contrast for optimal readability.

Trying to run [email protected] in my app.

Compilation failing due to lodash error in package.

 ERROR in ./~/node-vibrant/lib/vibrant.js
Module not found: Error: Can't resolve 'lodash/defaults' in '/app/node_modules/node-vibrant/lib'
 @ ./~/node-vibrant/lib/vibrant.js 4:15-41
 @ ./~/node-vibrant/lib/browser.js


ERROR in ./~/node-vibrant/lib/builder.js
Module not found: Error: Can't resolve 'lodash/clone' in '/app/node_modules/node-vibrant/lib'
 @ ./~/node-vibrant/lib/builder.js 3:12-35
 @ ./~/node-vibrant/lib/vibrant.js
 @ ./~/node-vibrant/lib/browser.js


ERROR in ./~/node-vibrant/lib/generator/default.js
Module not found: Error: Can't resolve 'lodash/defaults' in '/app/node_modules/node-vibrant/lib/generator'
 @ ./~/node-vibrant/lib/generator/default.js 5:15-41
 @ ./~/node-vibrant/lib/generator/index.js
 @ ./~/node-vibrant/lib/vibrant.js
 @ ./~/node-vibrant/lib/browser.js

We are using webpack for packing our client side js,

From the package.json https://github.com/akfish/node-vibrant/blob/master/package.json#L6
"browser": "lib/browser.js"

and within the file
https://github.com/akfish/node-vibrant/blob/master/lib/browser.js#L5

we have
Vibrant.DefaultOpts.Image = require('./image').Browser;

which require('./image')
has both server side and client side code.

even if we directly require https://github.com/akfish/node-vibrant/blob/master/lib/image/browser.js file,
we are still having Image = require('./index');
https://github.com/akfish/node-vibrant/blob/master/lib/image/browser.js#L5

which cause webpack error

ERROR in ./~/node-vibrant/~/jimp/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/rodhsiao/git/react-weather/node_modules/node-vibrant/node_modules/jimp
 @ ./~/node-vibrant/~/jimp/index.js 1:9-22

ERROR in ./~/node-vibrant/~/jimp/~/read-chunk/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/rodhsiao/git/react-weather/node_modules/node-vibrant/node_modules/jimp/node_modules/read-chunk
 @ ./~/node-vibrant/~/jimp/~/read-chunk/index.js 2:9-22

ERROR in ./~/node-vibrant/~/jimp/~/mime/mime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/rodhsiao/git/react-weather/node_modules/node-vibrant/node_modules/jimp/node_modules/mime
 @ ./~/node-vibrant/~/jimp/~/mime/mime.js 2:9-22

I see that there is logic to clean up the <canvas> node after the palette has been identified, but I'm seeing the DOM nodes stick around in my case after requesting the same img src multiple times. So it's possible that it is related to caching or something.

Trying to use node-vibrant in ng5 project . so i try to import the npm package with

import Vibrant = require('node-vibrant');
//or
import Vibrant from 'node-vibrant' ;
//or
import * as Vibrant from 'node-vibrant/src/vibrant';
//or
import Vibrant = require('node-vibrant/src/vibrant')

without success .
the i try to use it like that

<script src="node_modules/node-vibrant/dist/vibrant.js" charset="utf-8"></script>

declare var Vibrant :any;
Vibrant.from('this.toPlayRadio.pic').getPalette(function(err, palette) {
console.log(palette);
});

but it return an error when use it

TypeError: this._canvas is undefined
Stack trace:
TypeError: this._canvas is undefined
BroswerImage.prototype.remove@http://localhost:8080/node_modules/node-vibrant/dist/vibrant.js:12676:9
Vibrant.prototype.getPalette/<@http://localhost:8080/node_modules/node-vibrant/dist/vibrant.js:7103:43
finallyHandler@http://localhost:8080/node_modules/node-vibrant/dist/vibrant.js:2593:15
tryCatcher@http://localhost:8080/node_modules/node-vibrant/dist/vibrant.js:5910:16
[22]</module.exports/Promise.prototype._settlePromiseFromHandler@http://localhost:8080
...

and this is my tsconfig.json file

"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"noStrictGenericChecks": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true
}

and i use

"typescript": "^2.6.2",

so i am wondering how to use node-vibrant with ng5 , and how to correctly import it in ts class

I plan to use this library on both server and client, is it possible to use an img node to get the image from?

Although this port is focused on node.js, it's time for a proper project page.

• Show cases
• Live demo
• Docs

Is it possible to get more than one color from an image?

I'm looking at a tool like this: http://www.pictaculous.com/ which will pick the 4 dominant (?) colors from an image. Is this possible with node-vibrant?

Some images get somewhat wrong colors.
For example the following image, the most populated color for some reason is blue, even though we can clearly see that brown is the most dominant color

The color palette i get is:

[ {"population" : 12671, "rgb" : [ 33, 108, 147 ]}, 
  {"population" : 11694 ,"rgb" : [ 117, 80, 56 ]}, 
  {"population" : 9527, "rgb" : [ 250, 250, 249 ]}, 
  {"population" : 8312, "rgb" : [ 158, 200, 214 ]}, 
  {"population" : 5161, "rgb" : [ 180, 163, 140]}, 
  {"population" : 2663,"rgb" : [ 52, 31, 35 ]}]

Am I missing something?

While we could solve this with the addition of some CSS, it's a little tricky to target the canvas elements created by node-vibrant as they have no class and are not contained within another element, meaning that we must have a very general CSS rule to hide them, which is not ideal.

1926a9c adds a crossOrigin header to any request, even if the URL is loaded from the same origin.

This has a negative impact in (at least) Chrome 47:

• say you have image X already loaded in the page (via new Image() or classic <img>). Chrome will use a copy from it's cache, if available.
• Run Vibrant against image X. Chrome will start a new HTTP request (including Origin: header) to load the same image. Cache is effectively disabled in any case - even if the image had already been processed by Vibrant in an earlier request.
• say you load image X again via new Image() or <img> in the same page (no reload). Chrome will start a third(!) request, even if this one is essentially identical to the first

So, it's (fully) loading an image twice, that would already be present in cache.

Removing the crossOrigin header makes Chrome load the image only once - and if possible from cache.

So, please add crossOrigin only for requests that are really cross-origin.

Any potential of enhancing the library to take a list of images? I have some video thumbs, and it would be interesting to get the primary colors that are in all of them images.

I could do it with more work by adding the images to a canvas and then transferring that to an img tag. Or creating a stitched image, but it'd be nice if the library could handle it.

I am having a API connected and throwing requests with no cors headers to frontend and image URL's are extracted and sent to vibrant.in that case the image is not extracted into the vibrant, and throws an error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

any preferred way to overcome this?

Hi
I could not find the dist directory.

The sampling stage is the main hotspot. Current implementation is not ideal due to the ugly loop which copies pixels explicitly, which is a huge waste of computation time.
It should and will be done with some more native approach to utilize browser/JS engine optimizations.

• Add Image.downsampling method
• In node.js env
• In browser env

The implementation is very straight forward:

1. Maintain a color name dictionary (color name vs color value)
2. Calculate color deltas between querying color and those in the dict
3. Output colors with smallest deltas

Hi thanks for awesome plugin..

I'm running this code:

console.log("this happends once");

Vibrant.from(this.image).getPalette((err, palette) => {

        console.log("this happends 3 times")

        for (color in palette) {
               if (this.colors.length<5 && !!palette[color].rgb)
                    this.colors.push(palette[color].rgb.join(','))
        }
})

the Vibrant code works fine except it runs multiple times instead of once, I'm not sure
what I'm doing wrong here.. could you please help me figure out this issue?

thnx!

Just to make sure anyone trying to use this library in Angular can find an answer, you have to add:

"allowSyntheticDefaultImports": true,

to the tsconfig.json file at the root of your project for this to work:

import * as Vibrant from 'node-vibrant'

After that, everything works fine. I'm not sure if something can be done with the typings to make this unnecessary or not.

I have a huge list of images that I'm running through node-vibrant. I'm noticing quite often the values of the getPalette() object are null, instead of an instance of Swatch.

Is this a bug or is there some logic behind this? It certainly makes it difficult to programmatically associate some colours with an image.

Investigate the possibility of optimizing color quantizer

• Reduce copy operations. Do stuff in-place.
• Investigate Android M's ColorCutQuantizer

Looks like the refactoring caused a bug.

I can't create a PR since the build would not work on my machine, but here's how to fix it.

After this line https://github.com/akfish/node-vibrant/blob/master/src/Vibrant.coffee#L14 add

util = require('./util')

Change the Vibrant.hslToRgb call to util.hslToRgb on those two lines

https://github.com/akfish/node-vibrant/blob/master/src/Vibrant.coffee#L122

https://github.com/akfish/node-vibrant/blob/master/src/Vibrant.coffee#L130

The example given for NodeJS is ancient, probably ES5, and it doesn't work for me.

I'm currently stuck with the following code:

Vibrant = require('node-vibrant'); Vibrant.from('https://cdn.discordapp.com/icons/256566731684839428/06d25eba0b3b4de642dd3ad82a58bb75.jpg').getSwatches()

But I get JimpImage {} with no properties inside.
All I want is getting the vibrant colour.

I also tried with:
const Vibrant = require('node-vibrant'); const vibrant = new Vibrant('https://cdn.discordapp.com/icons/256566731684839428/06d25eba0b3b4de642dd3ad82a58bb75.jpg'); vibrant.swatches();

And got { Vibrant: {}, Muted: {}, DarkVibrant: {}, DarkMuted: {}, LightVibrant: {}, LightMuted: {} }

But they are empty.

I get an error on some images when using .getPalette().

TypeError: undefined is not an object (evaluating 'vbox.count') — mmcq.js:14

The issue occurs in both Chrome and Safari, and it occurs randomly with different images. The images that cause this error are consistent. A lot of images that cause this issue have transparency, but this could be a coincidence. Here's the code I'm running:

    const logo = this.logo; // ref of img
    Vibrant.from(logo).getPalette((err, palette) => {
      console.log(palette, err);
    }

getTitleTextColor(): string
getBodyTextColor(): string

How do I consume these methods?? I tried Vibrant.Swatch(swatch).getTitleTextColor

Allow quantizers, generators or any other part of the project to store necessary diagnostic data (e.g. intermediate color swatches) to a common place for later access. This is useful for debugging algorithms, or advanced usages.

I've been trying to use Vibrant in an isomorphic setting and the asynchronous getSwatches doesn't match the API of Vibrant directly.

As well adding a browser field to package.json and add vibrant.js as a dependency because this is the only published vibrant package on npm.

Because it's the popular thing to do.
Making node-vibrant modular and flexible for the next big step (ultra-vibrant)

Hi,

I'm kind of new to web workers so forgive my lack of knowledge - can this be made to work with them?

Perhaps it would need a new Image class - one that takes the input of canvas.toDataURL()?

Thanks
James

Hi,
I've been try find solution but I can't.

I use this library on client side. I'd like get color from input file or ImageHTMLElement.

1. in input[type="file"] client select image
2. I get url by window.URL.createObjectURL(event.target.files[0]);
3. I create ImageHtmlElement and set there image.
4. I get image by id and as below
   example

import React, {Component}
import Vibrant from 'node-vibrant/lib';
class X extends Component{

vibrant(){
     var im = document.getElementById('palette-image');

        var vib = Vibrant.from(im.src).getPalette(function(e,p){
          console.log(e,p); // return error that fs,open is not a function
        });

        var vib2 = Vibrant.from(im).getPalette(function(e,p){
          console.log(e,p); // return error that data must be a buffer
        });
}
render(){
return ...;
}
}

I work in ReactJS but I write in ES6 next translate it to JS (webpack).

Any suggest how I can solve this problem? I know that it isn't library bug, but maybe someone has any idea.

Thanks in advance,
Jarek

Hi, would you please consider this? The latest is supposed to be up to 6x faster and include new APIs such as filters. Here's a video from Google I/O: https://youtu.be/8UicJ0SxBwA?t=19m44s

I believe the latest code is here: https://github.com/android/platform_frameworks_support/blob/master/v7/palette/src/main/java/android/support/v7/graphics/Palette.java

Latest API docs: https://developer.android.com/reference/android/support/v7/graphics/Palette.html

The MMCQ quantizer is not suitable for this kinda of applications. It does not reflect how human eyes percept colors. The generated colors are often unnatural. And most color information is simply lost.

I'm investigating a new approach to quantize the color, which uses color delta as distance function for clustering. Early experiments showed promising results.

I'm trying to use this in my react-native app, and the component seems by default to use a browser-based image class, and I can't figure out how to get it to use the node image class as documented in the README.
I have

var Vibrant = require('node-vibrant');
const { 
  Image,
} = Vibrant;

And when I try to set the Image option with

        var v = new Vibrant(uri, {Image: Image.Node});

I get Cannot read property 'Node' of undefined

I think I'm just not importing Image.Node properly but I'm not sure how to do it.

• Run specs in browser environment (use karma)
• Compare color by their similarity instead of looking for exact match
• Specs for new APIs

Noticed this spitting out image dimensions in my console. Intentional?

https://github.com/akfish/node-vibrant/blob/master/src/browser-image.coffee#L25

console.log @width, @height

Also, awesome tool. Checking it out for the first time today. 👍

Because it's an even more popular thing to do
Provide WASM version for color utils, quantizers and other hotspots for performance boost.

Hi, all grayscale images, for example:
https://www.facebook.com/photo.php?fbid=10107296866472911&l=bb741fb5ef

Generates these swatches in v2.0.0 with default options:

{ Vibrant:
   Swatch {
     rgb: [ 144, 72, 192 ],
     population: 0,
     hsl: [ 0.7666666666666666, 0.4878048780487805, 0.5176470588235293 ] },
  Muted:
   Swatch {
     rgb: [ 140, 140, 140 ],
     population: 548,
     hsl: [ 0, 0, 0.5490196078431373 ] },
  DarkVibrant:
   Swatch {
     rgb: [ 48, 116, 116 ],
     population: 0,
     hsl: [ 0.5, 0.41463414634146345, 0.32156862745098036 ] },
  DarkMuted:
   Swatch {
     rgb: [ 100, 100, 100 ],
     population: 1561,
     hsl: [ 0, 0, 0.39215686274509803 ] },
  LightVibrant:
   Swatch {
     rgb: [ 200, 80, 204 ],
     population: 0,
     hsl: [ 0.8279569892473119, 0.5486725663716815, 0.5568627450980392 ] },
  LightMuted:
   Swatch {
     rgb: [ 156, 156, 156 ],
     population: 514,
     hsl: [ 0, 0, 0.611764705882353 ] } 
}

All the *Vibrant swatches are not grayscale. I think the user would expect all swatches to be grayscale. I reported this issue previously for vibrant.js: jariz/vibrant.js#18. I was hoping updated algorithm will help with this but it doesn't. Is this something node-vibrant can help with, or should we do grayscale detection separately?

Would like to do something like v = new Vibrant('http://slimages.macys.com/is/image/MCY/products/0/optimized/2899260_fpx.tif', opts)

If this is something you'd like part of your lib, I can send you a PR :)

Vibrant.form(src)
  .quality(1)
  .clearFilters()
  # ...
  getPalette (err, palette) ->

It should be «from»

I'd like to use Vibrant to help populate a database of products with colour information to be used in a colour search feature. I'd like to restrict the number of colours that people can search on so it doesn't get overwhelming.

So, for example, if an image has 8 hues of blue in it, Vibrant would only output a single object with the hex value equal to one I've previously selected as the default value for blue.

Is it possible to do that with Vibrant?

Hi, sometimes the image file is already read into a buffer, such as when using node-vibrant as a step of a gulp pipeline. It'll be nice to not have to read the file again.

Reported by @Uriziel01

It should be a separate issue but I just want to drop a quick note that it bothers me that loading v3.0.0.alpha.1 using async import:

System.import('node-vibrant').then(function (importedObject) {
    self.vibrant = importedObject;
});

will not work because object returned from System.import is an empty object, I have to use it like so:

System.import('node-vibrant').then(function (importedObject) {
    self.vibrant = Vibrant;
});

It was working correctly in previous vibrant versions.

When I import it into an angular project I get the following:

The only way I've been able to use it is declaring it as a global script and then use the "declare var x:any" syntax. But I can't use their types. Is there any way to import it and have the @types available to use? I'm using Angular 5 with the angular CLI and VS Code as my EDI.

Hey, as there's no way to contact you @akfish (I can't find your email address), I figured I'd just file a issue here.
Your version of vibrant is obviously superior to the original, so I wondered if you'd be interested in taking over the project and maintaining it.

You can either take over the repo as it is (I'd add you as a maintainer and you'd redirect from node-vibrant to my repo or something), or I could just add a large warning that I'm abandoning it and people should use yours instead, your call.

Hope you will consider it! I still have a lot of people filing issues in mine, but I just can't be bothered, knowing your far better version exists (which is why I'm abandoning mine).

I know it is not an easy piece of work, but offering webp support would be pretty cool.

Thanks.

Hi,

I'm trying to use node-vibrant with a ionic 2 project but I get an error:

"Error in ./ChillPage class ChillPage_Host - inline template:0:0 caused by: __WEBPACK_IMPORTED_MODULE_3_node_vibrant__.Vibrant is not a constructor"

Here is my code :

"import { Vibrant } from 'node-vibrant';"
...
" let v = new Vibrant('assets/data/artwork.jpg'); "
" v.getPalette(function(err, palette) { if (err) { console.log(err); } else { console.log(palette); } });"

What am I doing wrong?