react-native-image-palette

Get average color and palette from image or from multiple different segments of the image.

This package was inspired by react-native-image-colors enhancing its functionality, making it independent of Expo modules and unifying return types.
In current implementation you can define a specific segment of the image to get palette or average color of.

For palette calculation this module uses the Palette class on Android and swift-vibrant on iOS.

Since the implementation of getting palette is different for each platform you can get different color results for each.
Results of calculating average color will be more accurate and only have insufficient difference.

Installation

npm install @somesoap/react-native-image-palette

or

yarn add @somesoap/react-native-image-palette

Usage

Import functions you need:

import {
  getPalette,
  getAverageColor,
  getSegmentsAverageColor,
  getSegmentsPalette,
} from '@somesoap/react-native-image-palette';

Define image source

const image = "https://picsum.photos/id/85/1280/774"
// const image = "https://picsum.photos/id/28/4928/3264"

Or

const image = require('./image.jpeg');

Receive the result:

getPalette(image)
  .then((palette) => console.log(palette.vibrant))

getAverageColor(image)
  .then((averageColor) => console.log(averageColor))

API

getPalette(image, config): Primise<PaletteResult>

Retrieve the pallet of the given image.
⚠️ Results can be slightly different on each platform.

Property	Type	Description
image	string | ImageRequireSource	- can be string (image uri or base64) or local file require('./image.jpg')
config	PaletteConfig?	Optional config object

PaletteConfig - optional config type description

Property	Type	Description
headers	Record<string, string>?	HTTP headers to be sent along with the GET request to download the image (Auth token or e.g.)
fallbackColor	string?	If a color property couldn't be retrieved, it will default to this hex color string. By default is #fff

Return type PaletteResult

Property	Type
vibrant	string
darkVibrant	string
lightVibrant	string
muted	string
darkMuted	string
lightMuted	string
dominantAndroid	string?

Note dominantAndroid is only available on Android.

getAverageColor(image, config): Primise<string>

Returns average (mean) color from the given image.

Property	Type	Description
image	string | ImageRequireSource	- can be string (image uri or base64) or local file require('./image.jpg')
config	AverageColorConfig?	Optional config object

AverageColorConfig - optional config type description

Property	Type	Description
headers	Record<string, string>?	HTTP headers to be sent along with the GET request to download the image (Auth token or e.g.)
pixelSpacingAndroid	number?	How many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1). Default value is 5.

Return type string

Get average color or palette by image segments

This module provides functionality to get average color or palette from multiple segments of the given image.
For example, you can calculate average color only for top and bottom borders of the image, or get palette only from center of the image.

Functions getSegmentsAverageColor(image, segments, config): Promise<string[]> and getSegmentsPalette(image, segments, config): Promise<PaletteResult[]> enhancing functionality of the functions described above, by adding segments argument.
This argument is required array of coordinates in percents from which to which points you need to crop an image.
In the result you will receive an array with the same length as the length of segments array being passed.

ImageSegmentConfig has following structure:

Property	Type	Description
fromX	number (0..100)	Offset in % from the left side of the image. Under the hood we get image size and multiply this value on the amount of pixels in width of the image.
toX	number (0..100)	Must be > fromX. Offset in % from the left side of the image. Under the hood we get image size and multiply this value on the amount of pixels in width of the image.
fromY	number (0..100)	Offset in % from the top of the image. Under the hood we get image size and multiply this value on the amount of pixels in height of the image.
toX	number (0..100)	Must be > fromY. Offset in % from the top of the image. Under the hood we get image size and multiply this value on the amount of pixels in height of the image.

Usage

getSegmentsAverageColor(image, [
  { fromX: 0, toX: 100, fromY: 0, toY: 10 }, // from 0% to 100% by width and from 0% to 10% of height
  { fromX: 40, toX: 60, fromY: 40, toY: 60 }, // from 40% to 60% by width and from 40% to 60% of height
  { fromX: 0, toX: 100, fromY: 90, toY: 100 }, // from 0% to 100% by width and from 90% to 100% of height
])
  .then(([top, center, bottom]) => {
    console.log("Top border average color is: ", top)
    console.log("Center average color is: ", center)
    console.log("Bottom border average color is: ", bottom)
  })


getSegmentsPalette(image, [
  { fromX: 0, toX: 100, fromY: 0, toY: 10 }, // from 0% to 100% by width and from 0% to 10% of height
  { fromX: 40, toX: 60, fromY: 40, toY: 60 }, // from 40% to 60% by width and from 40% to 60% of height
  { fromX: 0, toX: 100, fromY: 90, toY: 100 }, // from 0% to 100% by width and from 90% to 100% of height
])
  .then(([top, center, bottom]) => {
    console.log("Top vibrant color is: ", top.vibrant)
    console.log("Center darkMuted color is: ", center.darkMuted)
    console.log("Bottom lightVibrant color is: ", bottom.lightVibrant)
  })
  .catch(console.error);