【发布时间】：2017-01-03 01:35:59
【问题描述】：
使用Color Thief javascript 效果，我编写了一些代码来抓取图像的主色并根据图像调整整个主题的配色方案。
这一切都适用于单个产品页面，其中仅使用 一个 图像。在我的目录页面上，有多个图像需要从中获取主色。每个产品一张图片。我需要将每种单独的颜色与产品一起显示。
您可以在每个产品的面板中看到彩色的border（它是棕色/橙色）。
我正在使用的非常精简的代码如下：
jQuery( document ).ready( function( $ ) {
var image = new Image;
var bg;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
image.onload = function() {
var colorThief = new ColorThief();
var dominantColor = colorThief.getColor(image);
var colorPalette = colorThief.getPalette(image, 7);
var backgroundColor = 'rgb('+ dominantColor +')';
/* Calculate the Lightest Color in the Palette */
var lightestColor = colorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Calculate the Darkest Color in the Palette */
var darkestColor = colorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess > currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
...
/* Shades (darker) */
...
/* Tints (lighter) */
...
/* Handle all CSS based on returned colors */
$('.product-bottom-info-container').each(function() {
$(this).css({
borderTop: '3px solid rgb('+ lightestColor +')'
});
});
}
image.src = bg;
});
});
在声明变量bg 之后，我将整个内容包装在each() 循环中。向下到底部，.product-bottom-info-container 是出现彩色边框的元素。我似乎无法让每个产品的边框成为它自己的颜色。它不断给每个边框循环中的最后一种颜色。
一些注意事项：
-
.post-image-hidden-container是每个产品上方的隐藏 div，包含产品的图片网址。 -
.product-bottom-info-container是每个产品底部的容器，带有产品标题和彩色边框。
我是否正确使用了each() 函数？我做错了什么？
谢谢
更新 我能够获取每个图像的所有 RGB 值并将它们放入一个数组中：
var thisColor;
var theseColors = [];
$('.shop-page-item-thumb').each(function() {
$(this).find('img').each(function() {
thisColor = colorThief.getColor(this);
theseColors.push(thisColor);
});
});
现在我已经有了所有可用的 RGB，有没有办法简单地遍历这个数组并将每个值分配给它各自的 .product-bottom-info-container 元素？
theseColors[0] 是第一个 RGB，theseColors[1] 是第二个，依此类推，一直到 theseColors[11]。
如果我在循环内运行console.log(thisColor)，我会得到以下结果：
[29, 28, 22]
[217, 195, 189]
[14, 14, 8]
[233, 232, 206]
[31, 31, 31]
[82, 97, 111]
[60, 68, 84]
[34, 29, 30]
[17, 30, 37]
[12, 11, 12]
[56, 43, 26]
[209, 150, 108]
我需要的 12 个 RGB 值。所以我们正朝着正确的方向前进。
Mottie 更新
这是其中一种产品的 HTML 结构。 .shop-page-item-thumb 是保存缩略图的容器，但 .shop-page-item-article 是父级（除了实际的 li 列表项之外）。
最终更新（感谢 Mottie！） 这段代码终于奏效了：
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
thumb.find('img').each(function() {
thisColor = colorThief.getColor(this);
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '3px solid rgb('+ thisColor +')'
})
});
});
非常喜欢，堆栈溢出！
【问题讨论】：
标签： javascript jquery each color-thief