Question

使用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 +')'
        })
    });
});

很多爱， Stack Overflow ！＆LT; 3

Answer 1

看起来这个代码在每个图像加载后循环遍历每个容器......

image

试试这个：

.each

更新：哦对不起，我没有仔细查看代码......另一个问题是$(this).find('img')[0].onload = function() {定义。每个容器只有一个，而不是一个...而不是在循环外定义它，在this循环内找到它然后附加一个onload ...

onload

它不应该更改上面添加边框颜色的代码，因为$('.shop-page-item-thumb').each(function() { var thumb = $(this); thumb.find('img').each(function() { thisColor = colorThief.getColor(this); // prev() targets the previous element (it should be // the 'product-bottom-info-container'; or use // thumb.parent().find('.product-bottom-info-container') thumb.prev().css({ borderTop: '3px solid rgb('+ thisColor +')' }); }); });会引用SELECT year, goals, GROUP_CONCAT(name ORDER BY name) as names FROM table t WHERE t.goals = (SELECT MAX(t2.goals) AS goals FROM table t2 WHERE t2.year = t.year ) GROUP BY year, goals;函数内部的图像。

如果您提供了现成的演示版本，那么解决问题会更容易。

Update2：不是将颜色推送到数组，而是直接将它们应用到边框;我不知道与容器相关的拇指图像，所以我们假设拇指与容器的顺序相同。 ~~一些HTML会帮助~~。更新了给定的HTML ...

SELECT t1.*
FROM yourTable t1
INNER JOIN
(
    SELECT year, MAX(goals) AS goals
    FROM yourTable
    GROUP BY year
) t2
    ON t1.year  = t2.year AND
       t1.goals = t2.goals

这个jQuery each（）循环只保留返回最后一种颜色（Color Thief）

1 个答案: