Skip to content

Commit

Permalink
*: format, refactor, and update
Browse files Browse the repository at this point in the history
- Change code style from [StandardJS](https://standardjs.com/) to [Prettier](https://prettier.io/)-like style.
- Format all the code.
- Use [ESLint](https://eslint.org/) for linting JavaScript code.
- Add `package-lock.json` file to `.gitignore`.
- Refactor code and tests.
- Add `format` NPM script to format code (`npm run format`).
- Update dependencies to their latest version.
  • Loading branch information
VoltrexKeyva committed Jun 4, 2022
1 parent 1590030 commit 4378387
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 191 deletions.
17 changes: 17 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules
node_modules/
package-lock.json
4 changes: 4 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "none"
}
7 changes: 4 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
language: node_js
node_js:
- "10"
- "12"
- "14"
- '10'
- '12'
- '14'
- '16'
72 changes: 37 additions & 35 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
const getPixels = require('get-pixels')
const getRgbaPalette = require('get-rgba-palette')
const chroma = require('chroma-js')
const getSvgColors = require('get-svg-colors')
const pify = require('pify')
const getPixels = require('get-pixels');
const getRgbaPalette = require('get-rgba-palette');
const chroma = require('chroma-js');
const getSvgColors = require('get-svg-colors');
const pify = require('pify');

const patterns = {
image: /\.(gif|jpg|png|svg)$/i,
raster: /\.(gif|jpg|png)$/i,
svg: /svg$/i
}
image: /\.(?:gif|jpg|png|svg)$/i,
raster: /\.(?:gif|jpg|png)$/i,
svg: /\.svg$/i
};

function colorPalette (input, options, callback) {
function colorPalette(input, options, callback) {
if (typeof options === 'function') {
callback = options
callback = options;
options = {
type: undefined,
count: 5
}
} else if (typeof options === 'string') {
};
} else if (typeof options === 'string')
options = {
type: options,
count: 5
}
}
};

// SVG
if (!Buffer.isBuffer(input)) {
if (input.match(patterns.svg)) {
return callback(null, getSvgColors(input, { flat: true }))
}
} else if (options.type === 'image/svg+xml') {
return callback(null, getSvgColors(input, { flat: true }))
}
if (
(!Buffer.isBuffer(input) && patterns.svg.test(input)) ||
options.type === 'image/svg+xml'
)
return callback(null, getSvgColors(input, { flat: true }));

// PNG, GIF, JPG
return paletteFromBitmap(input, options, callback)
return paletteFromBitmap(input, options, callback);
}

function paletteFromBitmap (filename, options, callback) {
if (!callback) {
callback = options
function paletteFromBitmap(filename, options, callback) {
if (callback == undefined) {
callback = options;
options = {
type: undefined,
count: 5
}
};
}

getPixels(filename, options.type, function (err, pixels) {
if (err) return callback(err)
const palette = getRgbaPalette(pixels.data, options.count).map(function (rgba) {
return chroma(rgba)
})
getPixels(filename, options.type, (err, pixels) => {
if (err != undefined) {
callback(err);

return;
}

const palette = getRgbaPalette(pixels.data, options.count).map((rgba) =>
chroma(rgba)
);

return callback(null, palette)
})
callback(null, palette);
});
}

module.exports = pify(colorPalette)
module.exports = pify(colorPalette);
20 changes: 8 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
"description": "Extract colors from images. Supports GIF, JPG, PNG, and even SVG!",
"main": "index.js",
"scripts": {
"test": "mocha && standard && standard-markdown *.md",
"lint": "standard"
"test": "mocha && eslint .",
"lint": "eslint .",
"format": "prettier -w ."
},
"repository": "https://github.com/colorjs/get-image-colors",
"keywords": [
Expand All @@ -23,20 +24,15 @@
"author": "zeke",
"license": "MIT",
"devDependencies": {
"mocha": "^8.1.1",
"standard": "^14.3.4",
"standard-markdown": "^6.0.0"
"eslint": "^8.17.0",
"mocha": "^10.0.0",
"prettier": "^2.6.2"
},
"dependencies": {
"chroma-js": "^2.1.0",
"get-pixels": "^3.3.2",
"chroma-js": "^2.4.2",
"get-pixels": "^3.3.3",
"get-rgba-palette": "^2.0.1",
"get-svg-colors": "^2.0.0",
"pify": "^5.0.0"
},
"standard": {
"env": {
"mocha": true
}
}
}
85 changes: 49 additions & 36 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,84 +7,91 @@ Extract colors from images. Supports GIF, JPG, PNG, and even SVG!
## Installation

```sh
npm install get-image-colors --save
npm install get-image-colors
```

This package is intended for use in node environments. It won't work in a browser because it has node-specific dependencies.

**Note:** when installing with webpack, if you get the error
**Note:** when installing with webpack, if you get the error

```
Can't resolve 'fs' in '/node_modules/get-svg-colors'
Can't resolve 'fs' in '/node_modules/get-svg-colors'
```

as per an [open issue in webpack-contrib](https://github.com/webpack-contrib/css-loader/issues/447), you will need to add `node: { fs: 'empty' }` to your `webpack.base.config`:
```

```js
module.exports = {
... ,
...,
node: { fs: 'empty' }
}
};
```

## Usage

```js
const path = require('path')
const getColors = require('get-image-colors')
const path = require('path');
const getColors = require('get-image-colors');

getColors(path.join(__dirname, 'double-rainbow.png')).then(colors => {
getColors(path.join(__dirname, 'double-rainbow.png')).then((colors) => {
// `colors` is an array of color objects
})
});
```

You can also use a buffer as an input source.

```js
const fs = require('fs')
const buffer = fs.readFileSync(path.join(__dirname, 'double-rainbow.gif'))
const getColors = require('get-image-colors')
const fs = require('fs');
const buffer = fs.readFileSync(path.join(__dirname, 'double-rainbow.gif'));
const getColors = require('get-image-colors');

getColors(buffer, 'image/gif').then(colors => {
getColors(buffer, 'image/gif').then((colors) => {
// `colors` is an array of color objects
})
});
```

`colors` is an array of [chroma.js](http://gka.github.io/chroma.js) color objects. chroma.js objects have methods that lets you pick the color format you want (RGB hex, HSL, etc), and give you access to powerful color manipulation features:
`colors` is an array of [chroma.js][] color objects. chroma.js objects have methods that lets you pick the color format you want (RGB hex, HSL, etc), and give you access to powerful color manipulation features:

```js
colors.map(color => color.hex())
colors.map((color) => color.hex());
// => ['#FFFFFF', '#123123', '#F0F0F0']

colors[0].alpha(0.5).css()
// => 'rgb(0,128,128)''
colors[0].alpha(0.5).css();
// => 'rgb(0,128,128)'
```

If you don't like promises, you can use node-style callbacks too:

```js
getColors(filename, function (err, colors) {
if (err) throw err
getColors(filename, (err, colors) => {
if (err) throw err;
// ...
})
});
```

The default number of colors returned is 5. You can specify a different number of colors by passing an options object into the call to getColors:
The default number of colors returned is 5. You can specify a different number of colors by passing an options object into the call to getColors:

```js
const path = require('path')
const getColors = require('get-image-colors')
const path = require('path');
const getColors = require('get-image-colors');

const options = {
count: 10,
type: 'image/png'
}
getColors(path.join(__dirname, 'double-rainbow.png'), options).then(colors => {
// `colors` is an array of 10 color objects
})
};

getColors(path.join(__dirname, 'double-rainbow.png'), options).then(
(colors) => {
// `colors` is an array of 10 color objects
}
);
```

## How it Works

`get-image-colors` uses [get-pixels](http://npm.im/get-pixels) to create a pixel array, then extracts a color palette with [get-rgba-palette](http://npm.im/get-rgba-palette), which uses [quantize](http://npm.im/quantize) under the hood.
`get-image-colors` uses [get-pixels][] to create a pixel array, then extracts a color palette with [get-rgba-palette][], which uses [quantize](http://npmjs.com/package/quantize) under the hood.

Colors are converted from [get-rgba-palette's flat array format](https://github.com/mattdesl/get-rgba-palette#palettepixels-count-quality-filter) into [chroma.js color instances](http://gka.github.io/chroma.js/).
Colors are converted from [get-rgba-palette's flat array format](https://github.com/mattdesl/get-rgba-palette#palettepixels-count-quality-filter) into [chroma.js color instances][chroma.js].

## Tests

Expand All @@ -95,15 +102,21 @@ npm test

## Dependencies

- [chroma-js](https://github.com/gka/chroma.js): JavaScript library for color conversions
- [get-pixels](https://github.com/scijs/get-pixels): Reads the pixels of an image as an ndarray
- [get-rgba-palette](https://github.com/mattdesl/get-rgba-palette): gets a palette of prominent colors from an array of pixels
- [get-svg-colors](https://github.com/colorjs/get-svg-colors): Extract stroke and fill colors from SVG files
- [chroma-js][chroma.js]: JavaScript library for color conversions
- [get-pixels][]: Reads the pixels of an image as an ndarray
- [get-rgba-palette][]: Gets a palette of prominent colors from an array of pixels
- [get-svg-colors](https://npmjs.com/package/get-svg-colors): Extract stroke and fill colors from SVG files

## Dev Dependencies

- [mocha](https://github.com/mochajs/mocha): simple, flexible, fun test framework
- [eslint](https://npmjs.com/package/eslint): ECMAScript/JavaScript linter
- [mocha](https://npmjs.com/package/mocha): Simple, flexible, fun test framework
- [prettier](https://npmjs.com/package/prettier): Opinionated code formatter

## License

MIT

[chroma.js]: https://npmjs.com/package/chroma-js
[get-pixels]: https://npmjs.com/package/get-pixels
[get-rgba-palette]: https://npmjs.com/package/get-rgba-palette
Loading

0 comments on commit 4378387

Please sign in to comment.