根据图像主色调改变背景颜色

Change color of background based on image main color?

本文关键字：改变 背景 颜色 色调 图像      更新时间：2023-09-26

我不知道这个是实际上是可能的，但它会很好，如果它是!从新的iTunes中获得灵感，其中背景颜色似乎是通过艺术作品图像的(主要)颜色设置的。我希望做一些类似的javascript/cs也许使用jQuery，本质上改变了一个div的背景颜色基于它里面的图像。

你可以试试:

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

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

在这里找到:通过Javascript获取图像的平均颜色

嗨，我今天设法做到了，我花了一个星期的时间来寻找解决方案，所以这里我的代码解释，希望它可以帮助你:

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);
}

你需要在主页上添加这个HTML，你想要的颜色是作为标志和css的主要颜色，你可以结合它为您的需要，谢谢!

:root {
  --logo-color: #ed0000;
}
.job-overview ul li i {
    background: var(--logo-color);
    color: white;
}
<script src="path/to/single-job-classic.js"></script>

相关文章：