jariz / vibrant.js Goto Github PK
View Code? Open in Web Editor NEWExtract prominent colors from an image. JS port of Android's Palette.
Home Page: http://jariz.github.io/vibrant.js/
License: MIT License
Extract prominent colors from an image. JS port of Android's Palette.
Home Page: http://jariz.github.io/vibrant.js/
License: MIT License
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.
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?
Security Dom exception 18. Not much revealed in the error reports received by analytics. Can you help me track it more?
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
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/
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
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.
Hello,
Is it possible to use a div background image as the source for the the image?
Thank you.
This is awesome, is it on any CDNs?
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.
Shows "Cross-origin image load denied by Cross-Origin Resource Sharing policy" while loading images from database.
Is it possible to use this great tool on images from another domain?
of course after they have been loaded.
Hello, is there a way to do the processing asynchronously?
simple fix: npm install --save del
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.
For this image, Vibrant completely misses the blue:
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/
Hex #313788
Circle 1:
Hex #343c8c
Circle 3:
Hex #383c8c
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
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?
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.
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]+');'
}
});
`
It looks like this is licensed MIT, but it's not specified in the license.md. Is this project MIT licensed?
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());
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.