Skip to content
Provide color stops for a gradient that loosely resembles the original image.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

resemble-image

Provide color stops for a gradient that loosely resembles the original image.

This package contains the algorithms getEqualWidthStops and getVariableWidthStops as described in Thoughts on Linear Gradients That Resemble Images.

getEqualWidthStops(), getVariableWidthStops(), Original

npm install resemble-image --save-dev
import { getEqualWidthStops, getVariableWidthStops } from 'resemble-image';
var getEqualWidthStops = require('resemble-image').getEqualWidthStops;
var getVariableWidthStops = require('resemble-image').getVariableWidthStops;

Each function returns a promise, which resolves in an array of color–position pairs.

getEqualWidthStops(image, { fidelity: 4 }).then((stops) => console.log(stops));
// [ { color: '#023d33', position: 0 },
//   { color: '#036357', position: 25 },
//   { color: '#91aaa5', position: 50 },
//   { color: '#cdcfd5', position: 75 } ]

getVariableWidthStops(image, { fidelity: 4 }).then((stops) => console.log(stops));
// [ { color: '#043630', position: 9.77 },
//   { color: '#02554b', position: 33.79 },
//   { color: '#c4c6dd', position: 67.97 },
//   { color: '#c4c6dd', position: 95.31 } ]

Documentation

You can’t perform that action at this time.