Skip to content

Commit 4378387

Browse files
committed
*: format, refactor, and update
- 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.
1 parent 1590030 commit 4378387

File tree

8 files changed

+242
-191
lines changed

8 files changed

+242
-191
lines changed

.eslintrc.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"env": {
3+
"commonjs": true,
4+
"es2021": true,
5+
"node": true
6+
},
7+
"extends": "eslint:recommended",
8+
"parserOptions": {
9+
"ecmaVersion": "latest"
10+
},
11+
"rules": {
12+
"indent": ["error", 2],
13+
"linebreak-style": ["error", "unix"],
14+
"quotes": ["error", "single"],
15+
"semi": ["error", "always"]
16+
}
17+
}

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules/
2+
package-lock.json

.prettierrc.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "none"
4+
}

.travis.yml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
language: node_js
22
node_js:
3-
- "10"
4-
- "12"
5-
- "14"
3+
- '10'
4+
- '12'
5+
- '14'
6+
- '16'

index.js

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
1-
const getPixels = require('get-pixels')
2-
const getRgbaPalette = require('get-rgba-palette')
3-
const chroma = require('chroma-js')
4-
const getSvgColors = require('get-svg-colors')
5-
const pify = require('pify')
1+
const getPixels = require('get-pixels');
2+
const getRgbaPalette = require('get-rgba-palette');
3+
const chroma = require('chroma-js');
4+
const getSvgColors = require('get-svg-colors');
5+
const pify = require('pify');
66

77
const patterns = {
8-
image: /\.(gif|jpg|png|svg)$/i,
9-
raster: /\.(gif|jpg|png)$/i,
10-
svg: /svg$/i
11-
}
8+
image: /\.(?:gif|jpg|png|svg)$/i,
9+
raster: /\.(?:gif|jpg|png)$/i,
10+
svg: /\.svg$/i
11+
};
1212

13-
function colorPalette (input, options, callback) {
13+
function colorPalette(input, options, callback) {
1414
if (typeof options === 'function') {
15-
callback = options
15+
callback = options;
1616
options = {
1717
type: undefined,
1818
count: 5
19-
}
20-
} else if (typeof options === 'string') {
19+
};
20+
} else if (typeof options === 'string')
2121
options = {
2222
type: options,
2323
count: 5
24-
}
25-
}
24+
};
2625

2726
// SVG
28-
if (!Buffer.isBuffer(input)) {
29-
if (input.match(patterns.svg)) {
30-
return callback(null, getSvgColors(input, { flat: true }))
31-
}
32-
} else if (options.type === 'image/svg+xml') {
33-
return callback(null, getSvgColors(input, { flat: true }))
34-
}
27+
if (
28+
(!Buffer.isBuffer(input) && patterns.svg.test(input)) ||
29+
options.type === 'image/svg+xml'
30+
)
31+
return callback(null, getSvgColors(input, { flat: true }));
3532

3633
// PNG, GIF, JPG
37-
return paletteFromBitmap(input, options, callback)
34+
return paletteFromBitmap(input, options, callback);
3835
}
3936

40-
function paletteFromBitmap (filename, options, callback) {
41-
if (!callback) {
42-
callback = options
37+
function paletteFromBitmap(filename, options, callback) {
38+
if (callback == undefined) {
39+
callback = options;
4340
options = {
4441
type: undefined,
4542
count: 5
46-
}
43+
};
4744
}
4845

49-
getPixels(filename, options.type, function (err, pixels) {
50-
if (err) return callback(err)
51-
const palette = getRgbaPalette(pixels.data, options.count).map(function (rgba) {
52-
return chroma(rgba)
53-
})
46+
getPixels(filename, options.type, (err, pixels) => {
47+
if (err != undefined) {
48+
callback(err);
49+
50+
return;
51+
}
52+
53+
const palette = getRgbaPalette(pixels.data, options.count).map((rgba) =>
54+
chroma(rgba)
55+
);
5456

55-
return callback(null, palette)
56-
})
57+
callback(null, palette);
58+
});
5759
}
5860

59-
module.exports = pify(colorPalette)
61+
module.exports = pify(colorPalette);

package.json

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
"description": "Extract colors from images. Supports GIF, JPG, PNG, and even SVG!",
55
"main": "index.js",
66
"scripts": {
7-
"test": "mocha && standard && standard-markdown *.md",
8-
"lint": "standard"
7+
"test": "mocha && eslint .",
8+
"lint": "eslint .",
9+
"format": "prettier -w ."
910
},
1011
"repository": "https://github.com/colorjs/get-image-colors",
1112
"keywords": [
@@ -23,20 +24,15 @@
2324
"author": "zeke",
2425
"license": "MIT",
2526
"devDependencies": {
26-
"mocha": "^8.1.1",
27-
"standard": "^14.3.4",
28-
"standard-markdown": "^6.0.0"
27+
"eslint": "^8.17.0",
28+
"mocha": "^10.0.0",
29+
"prettier": "^2.6.2"
2930
},
3031
"dependencies": {
31-
"chroma-js": "^2.1.0",
32-
"get-pixels": "^3.3.2",
32+
"chroma-js": "^2.4.2",
33+
"get-pixels": "^3.3.3",
3334
"get-rgba-palette": "^2.0.1",
3435
"get-svg-colors": "^2.0.0",
3536
"pify": "^5.0.0"
36-
},
37-
"standard": {
38-
"env": {
39-
"mocha": true
40-
}
4137
}
4238
}

readme.md

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,84 +7,91 @@ Extract colors from images. Supports GIF, JPG, PNG, and even SVG!
77
## Installation
88

99
```sh
10-
npm install get-image-colors --save
10+
npm install get-image-colors
1111
```
1212

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

15-
**Note:** when installing with webpack, if you get the error
15+
**Note:** when installing with webpack, if you get the error
16+
1617
```
17-
Can't resolve 'fs' in '/node_modules/get-svg-colors'
18+
Can't resolve 'fs' in '/node_modules/get-svg-colors'
1819
```
20+
1921
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`:
20-
```
22+
23+
```js
2124
module.exports = {
22-
... ,
25+
...,
2326
node: { fs: 'empty' }
24-
}
27+
};
2528
```
2629

2730
## Usage
2831

2932
```js
30-
const path = require('path')
31-
const getColors = require('get-image-colors')
33+
const path = require('path');
34+
const getColors = require('get-image-colors');
3235

33-
getColors(path.join(__dirname, 'double-rainbow.png')).then(colors => {
36+
getColors(path.join(__dirname, 'double-rainbow.png')).then((colors) => {
3437
// `colors` is an array of color objects
35-
})
38+
});
3639
```
3740

3841
You can also use a buffer as an input source.
42+
3943
```js
40-
const fs = require('fs')
41-
const buffer = fs.readFileSync(path.join(__dirname, 'double-rainbow.gif'))
42-
const getColors = require('get-image-colors')
44+
const fs = require('fs');
45+
const buffer = fs.readFileSync(path.join(__dirname, 'double-rainbow.gif'));
46+
const getColors = require('get-image-colors');
4347

44-
getColors(buffer, 'image/gif').then(colors => {
48+
getColors(buffer, 'image/gif').then((colors) => {
4549
// `colors` is an array of color objects
46-
})
50+
});
4751
```
4852

49-
`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:
53+
`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:
5054

5155
```js
52-
colors.map(color => color.hex())
56+
colors.map((color) => color.hex());
5357
// => ['#FFFFFF', '#123123', '#F0F0F0']
5458

55-
colors[0].alpha(0.5).css()
56-
// => 'rgb(0,128,128)''
59+
colors[0].alpha(0.5).css();
60+
// => 'rgb(0,128,128)'
5761
```
5862

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

6165
```js
62-
getColors(filename, function (err, colors) {
63-
if (err) throw err
66+
getColors(filename, (err, colors) => {
67+
if (err) throw err;
6468
// ...
65-
})
69+
});
6670
```
6771

68-
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:
72+
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:
6973

7074
```js
71-
const path = require('path')
72-
const getColors = require('get-image-colors')
75+
const path = require('path');
76+
const getColors = require('get-image-colors');
7377

7478
const options = {
7579
count: 10,
7680
type: 'image/png'
77-
}
78-
getColors(path.join(__dirname, 'double-rainbow.png'), options).then(colors => {
79-
// `colors` is an array of 10 color objects
80-
})
81+
};
82+
83+
getColors(path.join(__dirname, 'double-rainbow.png'), options).then(
84+
(colors) => {
85+
// `colors` is an array of 10 color objects
86+
}
87+
);
8188
```
8289

8390
## How it Works
8491

85-
`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.
92+
`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.
8693

87-
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/).
94+
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].
8895

8996
## Tests
9097

@@ -95,15 +102,21 @@ npm test
95102

96103
## Dependencies
97104

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

103110
## Dev Dependencies
104111

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

107116
## License
108117

109118
MIT
119+
120+
[chroma.js]: https://npmjs.com/package/chroma-js
121+
[get-pixels]: https://npmjs.com/package/get-pixels
122+
[get-rgba-palette]: https://npmjs.com/package/get-rgba-palette

0 commit comments

Comments
 (0)