我不知道这是否真的可行,但如果可以的话,那就太好了!从新版iTunes中获得灵感,背景色似乎是通过艺术作品图像的(主要)颜色设置的。我想使用javascript/cs,可能使用jQuery来做类似的事情,根据其中的图像改变一个div的背景颜色。
我不知道这是否真的可行,但如果可以的话,那就太好了!从新版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);
}
如果您想要页面的颜色与标志的主要颜色和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>