基于小程序的结构,参考 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(); // true
Apache-2.0 @ NEOBARAN