基于小程序的结构，参考 Color Thief 实现的获取图片主色调，非小程序也可使用，只需是 Uint8ClampedArray 类型的图片数据即可
npm i --save miniapp-color-thief以小程序中使用为 🌰
import colorThief from "miniapp-color-thief";
wx.canvasGetImageData({
canvasId: "myCanvas",
x: 0,
y: 0,
width: 100,
height: 100,
success: res => {
let palette = colorThief(res.data)
.palette()
.get();
console.log(palette); // [[0,0,0],[0,0,0],[0,0,0]...]
}
});-
参数:
{Number} count返回色板的颜色数量 ( 1 < count < 256 ){Number} quality计算颜色的精度，默认为10
-
说明:
获取图片的色板
colorThief(data)
.palette(count, quality)
.get(); // [[0,0,0],[0,0,0],[0,0,0]...]-
参数:
{Number} quality计算颜色的精度，默认为10
-
说明:
获取图片的主色调
colorThief(data)
.color(quality)
.get(); // [0,0,0]-
输出:
{Array}
-
说明:
返回颜色的 [R,G,B]
colorThief(data)
.palette()
.get(); // [[0,0,0],[0,0,0],[0,0,0]...]
colorThief(data)
.color()
.get(); // [0,0,0]-
输出:
{Array|String}
-
说明:
返回颜色的 16 进制
colorThief(data)
.palette()
.getHex(); // ['#000000','#000000','#000000'...]
colorThief(data)
.color()
.getHex(); // '#000000'-
输出:
{Array|Number}
-
说明:
返回颜色灰度
0 ~ 255
colorThief(data)
.palette()
.getGray(); // [0,0,0...]
colorThief(data)
.color()
.getGray(); // 0-
输出:
{Array|Boolean}
-
说明:
返回颜色是否为深色系
colorThief(data)
.palette()
.isDark(); // [true,true,false...]
colorThief(data)
.color()
.isDark(); // true-
输出:
{Array|Boolean}
-
说明:
返回颜色是否为浅色系
colorThief(data)
.palette()
.isLight(); // [true,true,false...]
colorThief(data)
.color()
.isLight(); // trueApache-2.0 @ NEOBARAN
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent