big0range-ui

Appearance

目录

color-thief 图片提取主题色 ​

getColor 从 img DOM 元素中提取主题色 ​

getColor: (sourceImage: HTMLImageElement, quality?: number) => [number, number, number]

显示代码
ts
import { ColorThief } from "@big0range/utils";

const imgDom = document.getElementById("img");

const color = ColorThief.getColor(imgDom, 10);
参数说明类型可选值默认
sourceImageimg 的 DOM 元素HTMLImageElement——
quality精准度,越低则准确度越高number—10

getColorFromUrl 从 url 中提取主题色 ​

getColorFromUrl: (imageUrl: string, quality?: number | undefined) => Promise<[number, number, number] | null>

显示代码
ts
import { ColorThief } from "@big0range/utils";

const imgUrl = "https://www.******";

const color = ColorThief.getColorFromUrl(imgUrl, 10);
参数说明类型可选值默认
imageUrl图片地址string——
quality精准度,越低则准确度越高number—10

getImageData 网络图片转 base64 ​

getImageData: (imageUrl: string) => Promise<string>

显示代码
ts
import { ColorThief } from "@big0range/utils";

const imgUrl = "https://www.******";

const base64 = await ColorThief.getImageData(imgUrl);
参数说明类型可选值默认
imageUrl图片地址string——

getPalette 取色板 ​

getPalette: (sourceImage: HTMLImageElement, colorCount?: number, quality?: number) => [number, number, number][]

显示代码
ts
import { ColorThief } from "@big0range/utils";

const imgDom = document.getElementById("img");

const colorPalette = ColorThief.getPalette(imgDom, 8, 10);
参数说明类型可选值默认
sourceImageimg 的 DOM 元素HTMLImageElement——
colorCount需要提取的数量number—8
quality精准度,越低则准确度越高number—10