react-img-contrast
v2.2.0
Published
根据图片平均色值生成文本最佳展示颜色
Downloads
24
Readme
安装
$ npm install react-img-contrast
API
getImgContrast( { imgSrc [, xMultiple, yMultiple, wMultiple, hMultiple] } )
根据图片平均色值返回最佳显示效果的颜色:black|white
imgSrc
:要计算图片的地址xMultiple
可选
:截取点的 x 轴距离,取与图片宽度的比例系数,默认 0yMultiple
可选
:截取点的 y 轴距离,取与图片高度的比例系数,默认 0wMultiple
可选
:要截取的比例(以图片宽度为准),默认 1hMultiple
可选
:要截取的比例(以图片高度为准),默认 1
import { getImgContrast } from "react-img-contrast";
const handler = async () => {
const res = await getImgContrast({
imgSrc: defaultBackground,
xMultiple: 0.3,
yMultiple: 0.8,
wMultiple: 0.4,
hMultiple: 0.2,
});
console.log(res) // => white|black
};
getColorContrast( color )
根据图片平均色值返回最佳显示效果的颜色:black|white
color
:16进制颜色,如#ffffff
,如果你只有rgb
颜色,可使用该项目下的rgbToHex
方法转化颜色
import { getColorContrast } from "react-img-contrast";
const handler = () => {
const res = getColorContrast('#ffffff');
console.log(res) // => black
};
getPalette( { imgSrc [, colorCount, quality ] } )
获取图片的主题调色板,将返回一个 rgb
颜色的数组
imgSrc
:要获取主题色板的图片地址colorCount
可选
:要获取多少种主题色,范围为 2 - 20,默认为10quality
可选
:必须是值 1 或更大的整数,默认为 10,值越大,返回速度越快,但提取的主题色可能就没那么精准,你必须在精度和速度之间做权衡
import { getPalette } from "react-img-contrast";
const handler = async () => {
const res = await getPalette({imgSrc: defaultBackground});
console.log(res) // => [[102, 51, 153],[65, 51, 153],...]
};
getColor( { imgSrc [, quality ] } )
获取图片的主题调色板,将返回一个 rgb
颜色的数组
import { getColor } from "react-img-contrast";
const handler = async () => {
const res = await getColor({imgSrc: defaultBackground});
console.log(res) // => [102, 51, 153]
};
工具方法
hexToRgb( hexColor )
将 16 进制的色值转换为 RGB 值
hexColor
:16 进制的颜色,如#ffffff
import { hexToRgb } from "react-img-contrast";
const res = hexToRgb("#ffffff");
console.log(res) // => '[255,255,255]'
rgbToHex( rgbColor )
将 16 进制的色值转换为 RGB 值
rgbToHex
:rgb颜色数组,如[255,255,255]
import { rgbToHex } from "react-img-contrast";
const res = rgbToHex([255,255,255]);
console.log(res) // => '#ffffff'