Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

color.js

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

color.js - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

6

dist/color.cjs.js

@@ -86,9 +86,9 @@ 'use strict';

var process = (item, args, handler) => new Promise((resolve, reject) => getImageData(getSrc(item)).then(data => resolve(handler(data, getArgs(args)))).catch(error => reject(error)));
var process = (handler, item, args) => new Promise((resolve, reject) => getImageData(getSrc(item)).then(data => resolve(handler(data, getArgs(args)))).catch(error => reject(error)));
var average = (item, args) => process(item, args, getAverage);
var average = (item, args) => process(getAverage, item, args);
var prominent = (item, args) => process(item, args, getProminent);
var prominent = (item, args) => process(getProminent, item, args);
exports.average = average;
exports.prominent = prominent;

6

dist/color.d.ts

@@ -10,6 +10,6 @@ declare type Args = {

declare type Output = Hex | Rgb | (Hex | Rgb)[];
declare type Rgb = number[];
declare type Rgb = [r: number, g: number, b: number];
declare type Url = string;
declare const average: (item: Item, args: Args) => Promise<Output>;
declare const prominent: (item: Item, args: Args) => Promise<Output>;
declare const average: (item: Item, args?: Partial<Args> | undefined) => Promise<Output>;
declare const prominent: (item: Item, args?: Partial<Args> | undefined) => Promise<Output>;
export { average, prominent };

6

dist/color.esm.js

@@ -82,8 +82,8 @@ var getSrc = item => typeof item === 'string' ? item : item.src;

var process = (item, args, handler) => new Promise((resolve, reject) => getImageData(getSrc(item)).then(data => resolve(handler(data, getArgs(args)))).catch(error => reject(error)));
var process = (handler, item, args) => new Promise((resolve, reject) => getImageData(getSrc(item)).then(data => resolve(handler(data, getArgs(args)))).catch(error => reject(error)));
var average = (item, args) => process(item, args, getAverage);
var average = (item, args) => process(getAverage, item, args);
var prominent = (item, args) => process(item, args, getProminent);
var prominent = (item, args) => process(getProminent, item, args);
export { average, prominent };

2

dist/color.js

@@ -1,1 +0,1 @@

var colorjs=function(r){"use strict";var a=(r,a)=>{var t=r.map((r=>{var t=Array.isArray(r)?r:r.split(",").map(Number);return"hex"===a.format?e(t):t}));return 1===a.amount||1===t.length?t[0]:t},t=(r,a)=>{var t=Math.round(r/a)*a;return Math.min(t,255)},e=r=>"#"+r.map((r=>{var a=r.toString(16);return 1===a.length?"0"+a:a})).join(""),n=(r,t)=>{for(var e=4*t.sample,n=r.length/e,o={r:0,g:0,b:0},g=0;g<r.length;g+=e)o.r+=r[g],o.g+=r[g+1],o.b+=r[g+2];return a([[Math.round(o.r/n),Math.round(o.g/n),Math.round(o.b/n)]],t)},o=(r,e)=>{for(var n=4*e.sample,o={},g=0;g<r.length;g+=n){var m=[t(r[g],e.group),t(r[g+1],e.group),t(r[g+2],e.group)].join();o[m]=o[m]?o[m]+1:1}return a(Object.entries(o).sort((([r,a],[t,e])=>a>e?-1:1)).slice(0,e.amount).map((([r])=>r)),e)},g=(r,a,t)=>new Promise(((e,n)=>{return(o=(r=>"string"==typeof r?r:r.src)(r),new Promise(((r,a)=>{var t=document.createElement("canvas"),e=t.getContext("2d"),n=new Image;n.onload=()=>{t.height=n.height,t.width=n.width,e.drawImage(n,0,0);var a=e.getImageData(0,0,n.width,n.height).data;r(a)},n.onerror=()=>a(Error("Image loading failed.")),n.crossOrigin="",n.src=o}))).then((r=>e(t(r,(({amount:r=3,format:a="array",group:t=20,sample:e=10}={})=>({amount:r,format:a,group:t,sample:e}))(a))))).catch((r=>n(r)));var o}));return r.average=(r,a)=>g(r,a,n),r.prominent=(r,a)=>g(r,a,o),r}({});
var colorjs=function(r){"use strict";var a=(r,a)=>{var t=r.map((r=>{var t=Array.isArray(r)?r:r.split(",").map(Number);return"hex"===a.format?e(t):t}));return 1===a.amount||1===t.length?t[0]:t},t=(r,a)=>{var t=Math.round(r/a)*a;return Math.min(t,255)},e=r=>"#"+r.map((r=>{var a=r.toString(16);return 1===a.length?"0"+a:a})).join(""),n=(r,t)=>{for(var e=4*t.sample,n=r.length/e,o={r:0,g:0,b:0},g=0;g<r.length;g+=e)o.r+=r[g],o.g+=r[g+1],o.b+=r[g+2];return a([[Math.round(o.r/n),Math.round(o.g/n),Math.round(o.b/n)]],t)},o=(r,e)=>{for(var n=4*e.sample,o={},g=0;g<r.length;g+=n){var m=[t(r[g],e.group),t(r[g+1],e.group),t(r[g+2],e.group)].join();o[m]=o[m]?o[m]+1:1}return a(Object.entries(o).sort((([r,a],[t,e])=>a>e?-1:1)).slice(0,e.amount).map((([r])=>r)),e)},g=(r,a,t)=>new Promise(((e,n)=>{return(o=(r=>"string"==typeof r?r:r.src)(a),new Promise(((r,a)=>{var t=document.createElement("canvas"),e=t.getContext("2d"),n=new Image;n.onload=()=>{t.height=n.height,t.width=n.width,e.drawImage(n,0,0);var a=e.getImageData(0,0,n.width,n.height).data;r(a)},n.onerror=()=>a(Error("Image loading failed.")),n.crossOrigin="",n.src=o}))).then((a=>e(r(a,(({amount:r=3,format:a="array",group:t=20,sample:e=10}={})=>({amount:r,format:a,group:t,sample:e}))(t))))).catch((r=>n(r)));var o}));return r.average=(r,a)=>g(n,r,a),r.prominent=(r,a)=>g(o,r,a),r}({});

10

package.json
{
"name": "color.js",
"version": "1.1.0",
"description": "Extract image colors with JavaScript. Supports DOM elements and (external) URL's.",
"version": "1.2.0",
"description": "Extract colors from an image.",
"homepage": "https://github.com/luukdv/color.js",

@@ -64,9 +64,9 @@ "repository": "luukdv/color.js",

"@rollup/plugin-babel": "^5.2.1",
"cypress": "^5.4.0",
"cypress": "^5.6.0",
"http-server": "^0.12.3",
"npm-run-all": "^4.1.5",
"rollup": "^2.32.0",
"rollup": "^2.33.1",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.0.3"
"typescript": "^4.0.5"
}
}

51

readme.md

@@ -14,3 +14,3 @@ # color.js

```html
<script src="https://unpkg.com/color.js@1.1.0/dist/color.js"></script>
<script src="https://unpkg.com/color.js@1.2.0/dist/color.js"></script>
```

@@ -36,3 +36,3 @@

```html
<script src="https://unpkg.com/color.js@1.1.0/dist/color.js"></script>
<script src="https://unpkg.com/color.js@1.2.0/dist/color.js"></script>
```

@@ -55,3 +55,3 @@

prominent('image.jpg').then(colors => ...)
prominent('img.jpg').then(colors => ...)
```

@@ -68,3 +68,3 @@

average('image.jpg').then(color => ...)
average('img.jpg').then(color => ...)
```

@@ -83,7 +83,7 @@

```js
average('image.jpg')
average('img.jpg')
```
```js
const img = document.getElementById('image')
const img = document.getElementById('photo')
average(img)

@@ -100,15 +100,6 @@ ```

The default options. Explanations of each option can be found below.
#### Amount
```js
{
amount: 3,
format: 'array',
group: 20,
sample: 10,
}
```
**Default:** `3`
#### Amount
Only applicable for [prominent](#prominent).

@@ -118,6 +109,12 @@

```js
prominent('img.jpg', { amount: 5 })
```
#### Format
The format in which colors should be returned. Options are `'array'` (default) and `'hex'`.
**Default:** `'array'`
The format in which colors should be returned. Options are `'array'` and `'hex'`.
```js

@@ -128,6 +125,16 @@ [241, 221, 63] // 'array'

```js
average('img.jpg', { format: 'hex' })
```
#### Group
**Default:** `20`
Configures how many similar colors should be combined into one color. A value of `1` would mean _every_ individual color would be considered, but this is often not ideal. Especially in photographs there's usually a lot of color data, and grouping colors could give more usable results. In the first example below, `group` is set to `5` and a lot of individual colors in the sea are returned. When more grouping is applied (`30` in the second example), the results become more distinct.
```js
prominent('img.jpg', { group: 30 })
```
![Group](img/group.jpg)

@@ -137,4 +144,10 @@

Configures how many pixels of an image should be processed. For example, a value of `20` means every 20th pixel is interpreted. A higher value means less accurate results, but better performance. An example of default sampling (`10`) on an image:
**Default:** `10`
Configures how many pixels of an image should be processed. For example, a value of `20` means every 20th pixel is interpreted. A higher value means less accurate results, but better performance. An example of default sampling on an image:
```js
average('img.jpg', { sample: 10 })
```
![Sample](img/sample.jpg)

@@ -141,0 +154,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc