0

我正在使用https://jariz.github.io/vibrant.js/从图像中获取颜色，在他们的网站上，他们显示了示例，其中还显示了最白的颜色（LightMuted），但是我可以获得任何其他值，但 LightMuted 什么也不返回对我来说，我怎样才能得到那种颜色？我试着像这样使用它：

            albumart.addEventListener('load', function () {
                var vibrant = new Vibrant(albumart);
                var swatches = vibrant.swatches()
                for (var swatch in swatches)
                    if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
                    var name = (swatches.LightMuted.getHex()); // Nothing
                    var details = (swatches.DarkVibrant.getHex()); // Returns color
4

2 回答 2

1

来自Vibrant.js

请注意，当 Vibrant 无法为配置文件找到匹配的颜色时，某些色板可能会设置为“未定义”！

您可以在之前检查该值

var name = swatches.LightMuted ? swatches.LightMuted.getHex() 
                               : '#333' // default value
于 2018-07-16T06:42:44.873 回答
0

有一个名为Kleur.js的库，您可以使用它来获取图像，但请记住，它每次都会提供随机调色板。

// Create the Kleur Object
Kleur = new Kleur();

// Set the image link to get the palette from
imageObj = Kleur.init(imgLink);

// Wait for the image to load
imageObj.onload = function(e) {

    // get the color array from the image
    let colorArr = Kleur.getPixelArray(imageObj);

    // pass the array to generate the color array

    let array_of_pixels = Kleur.generateColorArray(colorArr);

    // get light colors
    const light = Kleur.getLightColors(array_of_pixels);

    // you can get the dominant color from the image
    const dominant = Kleur.getDominant(array_of_pixels);

    // log the light colors and the dominant color
    console.log(light, dominant)
}

如果您想查看使用此代码的示例，请访问codepen

于 2020-04-19T15:01:56.063 回答