Change color of background based on image main color?

Question

I don't know if this is actually possible but it would be nice if it is! Taaking inspiration from the new iTunes where the background color seems to be set via the (major) color of the artwork image. I'm looking to do something similar with javascript/cs maybe using jQuery, essentially changing the background-color of a div based on an image inside it.

Art

Edit: like this: imgur.com/KNoN8fF.png – Art

possible duplicate of get average color of image via javascript – Guardado

Take a look at this StackOverflow post. It includes the code (and a jsFiddle demo) for taking the average color of an image. You can then apply this color to the background of your element. Note that for this to work, you must be using HTML canvas and the image bust be on the same domain (cross-domain restrictions). – Ponytail

@Guardado - yeah, but he might not have known that the average color of the image is what he needed to look for. – Ponytail

@ZacharyKniebel that doesn't make it not a duplicate. If the answer to this question is the same as the answer to a previous question, it is a duplicate. – Guardado

Answer 1

Here's what you could try out:

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

This library has a pretty cool demo: http://lokeshdhakar.com/projects/color-thief/

Found here: Get average color of image via Javascript

Linzy

Answer 2

Hi i managed today to do that, i was working a week on it to find the solution, So heres my code explained, hope it can help u:

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

u need to add this html on main page u want the color to be as main color of logo and the css, u can combine it for your needs, thanks!

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

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

Sharanshard