briangonzalez / rgbaster.js Goto Github PK
View Code? Open in Web Editor NEWπ¨ A simple library for extracting dominant colors from images.
π¨ A simple library for extracting dominant colors from images.
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,
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?
From vscode, on import analyze from "rgbaster";
Could not find a declaration file for module
. /home/mike/Code/portal/wallet/node_modules/rgbaster/dist/rgbaster.js implicitly has any
type.
$ npm ls rgbaster
....
βββ [email protected]
There's no types
entry in node_modules/rgbaster/package.json
$ grep types node_modules/rgbaster/package.json
"@types/jest": "^23.3.9",
I sent a PR to add it, but it looks like you already have - you just need to bump the version and publish it.
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!
Demo below:
var bookImg = "http://cdn11.bookln.cn/10138_B657D15628884CAAE67BC1DB1A0699B8.jpg"
RGBaster.colors(bookImg, {
paletteSize: 30,
exclude: ['rgb(255,255,255)'],
success: function (payload) {
var rgb = payload.secondary
}
});
I have the following functionality in an app:
I can drag an image from my local file system to the browser, using the file API I generate a data url (something like data:image/jpeg;base64:id) and use this as the src of an img.
Now I want to use this library to get the dominant color from this image and use that color as the background, but I keep getting the following error:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
Is there any way to fix this?
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 ?
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!
http://gg-test.com/albelli.de.png
fails to adapt and the same image loaded from dropbox https://dl.dropboxusercontent.com/u/1273764/albelli.de.png
adapts fine.
Hi,
I wanted to use RGBaster with Trianglify but RGBaster gives color in RGB and Trianglify get colors in hexadecimal.
What do you think about an option to get colors in their hexadecimal form ?
Thanks
Sorry viewing the transparency issues etc for PNG issues and couldnt quite figure out the answer from them. Is it possible or ?
warning rgbaster > grunt > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning rgbaster > grunt > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning rgbaster > grunt > glob > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
warning rgbaster > gulp-uglify > [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
warning rgbaster > gulp > [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
warning rgbaster > gulp > vinyl-fs > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
warning rgbaster > grunt > [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
warning rgbaster > grunt > findup-sync > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning rgbaster > gulp > vinyl-fs > glob-stream > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning rgbaster > gulp > vinyl-fs > glob-stream > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning rgbaster > gulp > vinyl-fs > graceful-fs > [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
warning rgbaster > gulp > vinyl-fs > glob-watcher > gaze > globule > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
Looks like development of this package is stopped for a long time. Is there any plans for future development and updates?
Running the following image https://imgur.com/nVqeA6i with exclude [ 'rgb(0,0,0)', 'rgba(255,255,255)' ] and a palette size of 20 as options will return rgb(255,255,255) while the array of results (below) has quite a different idea in mind.
["rgb(99,137,0)", "rgb(103,140,0)", "rgb(103,140,0)", "rgb(104,141,1)", "rgb(99,137,0)", "rgb(116,146,0)", "rgb(116,146,0)", "rgb(100,138,1)", "rgb(123,149,0)", "rgb(107,141,2)", "rgb(116,146,0)", "rgb(106,140,1)", "rgb(107,141,2)", "rgb(116,146,0)", "rgb(106,140,1)", "rgb(116,146,0)", "rgb(117,157,0)", "rgb(123,149,0)", "rgb(106,140,1)", "rgb(123,148,2)"]
I'm sure I'm missing something here. Is this a bug?
Hi,
Functionally, what is the difference between the following two?
if (src.startsWith('data')) img.crossOrigin = 'Anonymous'
and
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 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!
Not sure if I should open 3 issues or just aggregate them in one:
if data[i+3] === 0
, they shouldnt account to anything, currently they make every image with transparency have black
as the main colorI think package-lock.json
should not be tracked for the sake of cleaner diff
s, especially that the library doesn't have any dependencies.
@briangonzalez @AlfredJKwack, thank you so much for the beautiful work that you've done over the last few months!
It was a great to follow the transition of this repository's change through code. π
Close this issue after reading!
Great stuff!
I noticed that your latest version, 1.1.0 is not in bower.
Hi,
I've noticed that the color palette contains the same color several times.
Is this a bug or a 'feature'?
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.
why use .map(Boolean)
? thank u
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.
What does the count value represent.
π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:
My goal is to make a more robust repo that is "easier" to come back to after time away.
Stay tuned.
Am I supposed to write gupfile or webpack config or something?
Please add Setup in the README.
npm install rgbaster
did nothing.
Hey,
I can't find any indication of which browsers are supported. It would be good to have it listed in the README or something
Posible to use without success: function()
so it possible to make a return
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?
It would be nice if you add CommonJS and AMD support rather than implicitly adding window global namespace.
Hi,
There's no check to keep scaling within some bounds. The source code is actually commented to state that we accept a value from 0 to 1.
A couple of things come to mind:
If we agree to provide lower and upper bounds then we should also gracefully handle this. How do we want to go about that? Provide no return array and just an error, or a default array and an error?
Thoughts?
Error in the code make so the dominated color are black, and the secondary color are the dominated
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.