根据图像的主色更改背景颜色？

Question

我不知道这是否真的可行，但如果可以的话，那就太好了！从新版iTunes中获得灵感，背景色似乎是通过艺术作品图像的（主要）颜色设置的。我想使用javascript/cs，可能使用jQuery来做类似的事情，根据其中的图像改变一个div的背景颜色。

- user2279722

---

编辑：像这样：http://imgur.com/KNoN8fF.png - user2279722

可能是通过JavaScript获取图像的平均颜色的重复问题。 - cimmanon

看看这个StackOverflow帖子。它包括获取图像平均颜色的代码（以及jsFiddle演示）。然后，您可以将此颜色应用于元素的背景。请注意，为了使其正常工作，您必须使用HTML画布并且图像必须在相同的域上（跨域限制）。 - Zachary Kniebel

@cimmanon - 是的，但他可能不知道需要寻找图像的平均颜色。 - Zachary Kniebel

@ZacharyKniebel 这并不意味着它不是重复的。如果这个问题的答案与先前的问题相同，那么它就是一个重复的问题。 - cimmanon

Answer 1

以下是您可以尝试的内容：

https://github.com/lokesh/color-thief

这个库有一个相当酷的演示：http://lokeshdhakar.com/projects/color-thief/

此处发现：用JavaScript获取图像的平均颜色

- ndrizza

Answer 2

嗨，今天我终于成功了，我花了一周的时间来寻找解决方案， 这是我的代码解释，希望能对你有所帮助：

function getLogoColor() {
// Get all the logo images
var logos = document.querySelectorAll('.company-logo--image');

// Loop through the logo images
for (var i = 0; i < logos.length; i++) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = logos[i].src;
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0, img.width, img.height);

    // Get the image data
    var imageData = context.getImageData(0, 0, img.width, img.height);
    var data = imageData.data;

    // Initialize variables
    var colorFrequency = {};
    var dominantColor = '';
    var maxFrequency = 0;

    // Loop through the image data
    for (var j = 0; j < data.length; j += 4) {
        var red = data[j];
        var green = data[j + 1];
        var blue = data[j + 2];

        // Convert the RGB values to a hex code
        var color = rgbToHex(red, green, blue);

        // Check if the color is already in the colorFrequency object
        if (colorFrequency[color]) {
            colorFrequency[color]++;
        } else {
            colorFrequency[color] = 1;
        }
    }

    // Get the dominant color from the color frequency object
    for (var color in colorFrequency) {
        if (colorFrequency[color] > maxFrequency) {
            maxFrequency = colorFrequency[color];
            dominantColor = color;
        }
    }

    // Set the --logo-color variable
    document.documentElement.style.setProperty('--logo-color', dominantColor);
}

如果您想要页面的颜色与标志的主要颜色和css一致，您需要在主页面上添加此HTML代码，您可以按照自己的需求进行组合。谢谢！

:root {
  --logo-color: #ed0000;
}
.job-overview ul li i {
    background: var(--logo-color);
    color: white;
}

<script src="path/to/single-job-classic.js"></script>

- Rinor Jahaj