extract-colors - npm Package Compare versions

Comparing version 1.1.23 to 2.0.0

package.json

 {
   "name": "extract-colors",
-  "version": "1.1.23",
+  "version": "2.0.0",
   "description": "Extract color palettes from images",
-  "main": "dist/extract-colors.cjs.js",
-  "browser": "dist/extract-colors.umd.js",
+  "main": "lib/extract-colors.node.cjs.js",
+  "browser": "lib/extract-colors.browser.umd.js",
+  "types": "lib/extract-colors.browser.es.d.t",
   "scripts": {
-    "dev": "rollup -c -w",
-    "serve-website": "npm run build-doc && vite --host --port 3000",
-    "build-website": "npm run build-doc && vite build",
-    "build-doc": "node_modules/.bin/jsdoc -c jsdoc.json",
-    "build": "rollup -c",
+    "prebuild": "rm -rf ./lib",
+    "build": "tsc --project conf/tsconfig.browser.type.json && vite build --config conf/vite.config.browser.ts && tsc --project conf/tsconfig.node.type.json && vite build --config conf/vite.config.node.ts",
+    "postbuild": "cp lib/extractColors.browser.d.ts lib/extract-colors.browser.es.d.ts && mv lib/extractColors.browser.d.ts lib/extract-colors.browser.umd.d.ts &&  cp lib/extractColors.node.d.ts lib/extract-colors.node.es.d.ts && mv lib/extractColors.node.d.ts lib/extract-colors.node.cjs.d.ts",
     "lint": "eslint src --fix",
-    "test": "jest"
+    "test": "vitest --config conf/vite.config.test.ts",
+    "coverage": "vitest run --coverage --config conf/vite.config.test.ts",
+    "loop": "for file in lib/*/*/*.js; do terser $file --compress --mangle --mangle-props --source-map includeSources --output $file; done"
   },
@@ -39,26 +40,14 @@ "repository": {
   "files": [
-    "dist"
+    "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "canvas": "^2.10.2",
-    "docdash": "^1.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^4.1.0",
-    "highlight.js": "^10.7.3",
-    "jest": "^29.2.2",
-    "jest-environment-jsdom": "^29.2.2",
-    "jsdoc": "^3.6.10",
-    "milligram": "^1.4.1",
-    "rollup": "^2.67.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "vite": "^2.8.3"
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "@vitest/coverage-c8": "^0.25.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.27.0",
+    "typescript": "^4.8.4",
+    "vite": "^2.8.3",
+    "vitest": "^0.25.0"
   }
 }

readme.md

@@ -14,8 +14,8 @@ # Extract Colors
 Extract color palettes from images.  
-Simple use, < 5ko minified, fast process and no dependencies for browser.  
-Dependency to canvas for node.js
+Simple use, < 7ko minified, fast process and no dependencies for browser.  
+Need image reader for node.js
 
-![3 examples of colors extraction](./doc/colors.jpg)
+[Website](https://extract-colors.namide.com/) | [Demo](https://extract-colors.namide.com/demo/) | [Guide](https://extract-colors.namide.com/guide/)
 
-Try the [demo](https://namide.github.io/extract-colors/)
+![3 examples of colors extraction](./doc/colors-2.jpg)
 
@@ -52,6 +52,6 @@ ## Requirements
 
-Need to install dependency `canvas`
+Need to install an ImageData extractor like `get-pixels`
 
 ```bash
-npm install --save extract-colors canvas
+npm install --save extract-colors get-pixels
 ```
@@ -74,17 +74,5 @@
 
-Module example (latest version of packager)
-```js
-import extractColors from 'extract-colors/dist/extract-colors.browser.es.js'
+> You can use different types for `src` param (`String` for a path of image, `HTMLImageElement` or `ImageData`).
 
-const src = 'my-image.jpg'
 
-extractColors(src)
-  .then(console.log)
-  .catch(console.error)
-```
-
-> You can use different types for `src` param (`String` for a path of image, `Image` or `ImageData`).  
-> If you use `ImageData` type, be carrefull because the extractor will not optimize the process (it will not reduce the count of pixels).
-
-
 ### Node.js example
@@ -94,32 +82,22 @@
 const path = require('path')
-const { extractColors } = require('extract-colors')
+const getPixels = require("get-pixels")
+const extractColors = require('extract-colors')
 
 const src = path.join(__dirname, './my-image.jpg')
 
-extractColors(src)
-  .then(console.log)
-  .catch(console.log)
+getPixels(src, (err, pixels) => {
+  if(!err) {
+    extractColors(pixels)
+      .then(console.log)
+      .catch(console.log)
+  }
+})
 ```
 
-Module example (latest version of npm)
-```js
-const path = require('path')
-const { extractColors } = require('extract-colors/dist/extract-colors.node.es.js')
+> You can use different types for `src` param (`String` for a path of image or `ImageData`).
 
-const src = path.join(__dirname, './my-image.jpg')
 
-extractColors(src)
-  .then(console.log)
-  .catch(console.log)
-```
+### ExtractorOptions
 
-> You can use different types for `src` param (`String` for a path of image or `ImageData`).  
-> If you use `ImageData` type, be carrefull because the extractor will not optimize the process (it will not reduce the count of pixels).
-
-
-### Options
-
 ```js
-const src = 'my-image.jpg'
-
 const options = {
@@ -130,3 +108,6 @@ pixels: 10000,
   splitPower: 10,
-  colorValidator: (red, green, blue, alpha = 255) => alpha > 250
+  colorValidator: (red, green, blue, alpha = 255) => alpha > 250,
+  saturationDistance: 0.2,
+  lightnessDistance: 0.2,
+  hueDistance: 0.083333333
 }
@@ -149,9 +130,4 @@
 
-**saturationImportance**  
-_Power of the saturation weight during the process (0 is not used, 1 is only saturation and not area size)_  
-Type: `Number`  
-Default: `0.2`  
-
 **splitPower**  
-_Approximation power in the first color splitting during process (from 2 to 16)_  
+_Approximation power in the first color splitting during process (from 2 to 15)_  
 Type: `Integer`  
@@ -163,3 +139,3 @@ Default: `10`
 Type: `Function`  
-Default: `(red, green, blue, alpha = 255) => alpha > 250`  
+Default: `(red, green, blue, alpha = 255) => alpha > 250`
 
@@ -170,5 +146,20 @@ **crossOrigin**
 Type: `String`  
-Default: `null`  
+Default: `null`
 
+**saturationDistance**  
+_Minimum saturation value between two colors otherwise the colors will be merged (from 0 to 1)_
+Type: `String`  
+Default: `0.2`
 
+**lightnessDistance**  
+_Minimum lightness value between two colors otherwise the colors will be merged (from 0 to 1)_
+Type: `String`  
+Default: `0.2`
+
+**hueDistance**  
+_Minimum hue value between two colors otherwise the colors will be merged (from 0 to 1)_
+Type: `String`  
+Default: `0.083333333`
+
+
 ## Return of the promise
@@ -181,8 +172,11 @@
   {
-    hex: '#62342b',
-    red: 98,
-    green: 52,
-    blue: 43,
-    area: 0.5915,
-    saturation: 0.2156862
+    hex: "#858409",​​
+    red: 133,​​
+    green: 132,​​
+    blue: 9,​​
+    hue: 0.16532258064516128,​​
+    intensity: 0.4862745098039216,​​
+    lightness: 0.2784313725490196,​​
+    saturation: 0.8732394366197184,
+    area: 0.0004
   },
@@ -195,15 +189,13 @@ ...
 |---|---|---|---|
-| hex | #62342b | String | color in hexadecimal string |
-| red | 98 | Integer | red canal from 0 to 255 |
-| green | 52 | Integer | green canal from 0 to 255 |
-| blue | 43 | Integer | blue canal from 0 to 255 |
-| area | 0.5915 | Number | area of the color and his neighbouring colors from 0 to 1 |
-| saturation | 0.2156862 | Number | color saturation from 0 to 1 |
+| hex | #858409 | String | color in hexadecimal string |
+| red | 133 | Integer | red canal from 0 to 255 |
+| green | 132 | Integer | green canal from 0 to 255 |
+| blue | 9 | Integer | blue canal from 0 to 255 |
+| hue | 0.1653 | Number | color tone from 0 to 1 |
+| intensity | 0.4862 | Number | color intensity from 0 to 1 |
+| lightness | 0.2784 | Number | color lightness from 0 to 1 |
+| saturation | 0.8732 | Number | color saturation from 0 to 1 |
+| area | 0.0004 | Number | area of the color and his neighbouring colors from 0 to 1 |
 
 
-## API doc
-
-Read the [API doc here](https://namide.github.io/extract-colors/doc/)
-
-
 ## License
@@ -210,0 +202,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221303

increased by282.41%

Dev dependency count

8

decreased by-60%

Number of package files

25

increased by257.14%

Lines of code

1218

increased by1833.33%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

207

decreased by-3.72%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes