- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 Color Thief javascript 效果,我写了一些代码来获取图像的主色并根据图像调整整个主题的配色方案。
这一切都适用于单个产品页面,其中只使用了一个图像。在我的目录页面上,有多个图像我需要从中获取主色。每个产品一张图片。我需要将每种颜色与产品一起展示。
您可以在每个产品的面板中看到彩色边框
(棕色/橙色)。
我正在使用的精简代码如下:
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,其中包含产品的图片 url。.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! <3
最佳答案
看起来这段代码在每次图像加载后循环遍历每个容器...
/* Handle all CSS based on returned colors */
$('.product-bottom-info-container').each(function() {
$(this).css({
borderTop: '3px solid rgb('+ lightestColor +')'
});
});
试试这个:
$(this).closest('.product-bottom-info-container').css({
borderTop: '3px solid rgb('+ lightestColor +')'
});
更新:哦,抱歉,我没有仔细查看代码...另一个问题是 image
定义。只有一个,不是每个容器都有一个...与其在循环外定义,不如在.each
循环内找到,然后附加一个onload...
$(this).find('img')[0].onload = function() {
它不应该更改上面添加边框颜色的代码,因为 this
将引用 onload
函数内的图像。
如果您能提供现成的演示来使用,那么解决问题会更容易。
更新2:不是将颜色推送到数组,而是直接将它们应用到边框;我不知道缩略图与容器的关系,所以我们假设缩略图与容器的顺序相同。 一些 HTML 会有所帮助。针对给定的 HTML 更新...
$('.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 +')'
});
});
});
关于javascript - 这个 jQuery each() 循环只返回最后一种颜色(Color Thief),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41435292/
假设我有一个颜色数组(具有整个色谱,从红色到红色。)。较短的版本如下所示: public Color[] ColorArray = new Color[360] { Color.FromArgb(25
当我通过 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.gamefriction.com%2FCoded&prof
我需要帮助来解决验证 CSS。在这里,我在 W3 验证中遇到了 20 个相同的错误。我不明白。如果您能解决此问题,我将不胜感激。 错误:两种上下文中 color 和 background-color
我正在尝试覆盖 bootstrap4 样式。 我没有使用 Sass 的经验,但这看起来像是 bootstrap SCSS 文件中的错误。 我的自定义文件是: /* custom.scss */
我是 sass 的新手,我写了一些 sass 代码,但它没有编译。 $classes : primary secondary success warning danger; $colors
我想制作一个散点图,其中每个点都有一个球体。点及其球体都根据某些列值着色。 一个显示我想要的最小示例: library(ggplot2) library(vcd) # only needed for
我正在尝试添加一个选项来更改网站颜色。所以,我有一个工作正常的色域,但问题是当鼠标悬停时我需要将颜色更改为深 10%。函数 darken 表示第一个参数必须是颜色。 Error: argument `
我正在尝试从下拉菜单中更改主题颜色,但出现此错误:“预期类型为'List>'的值,但类型为之一 'MappedListIterable>' Color selected ; MaterialApp(
有没有办法将 Inno Setup 底部面板的背景颜色更改为白色? 谢谢你的帮助! 最佳答案 您描述的底部面板实际上是向导表单的区域,因此您只需设置 Color WizardForm 的属性(prop
sublime text包Color Highlighter看起来很有用。但是,它的行为似乎并不像文档中描述的那样。 根据文档: Usage : Just click or move the curs
我有一个由 Excel 2007 创建的文档: ... 在 xl/styles.xml 的字体定义中包含以下颜色: 我从ECMA标准了解到这个颜色索引指的是收藏于 xl/styles.xml如果有
简单问题: (如何)是否可以设置 的值在 Chrome 中选择此类输入时,要在颜色选择器中清空吗? 编辑:我想将输入的值更改为 "" 最佳答案 我认为它不能设置为透明,但您可以使用value="#c
我正在尝试截屏,检查屏幕截图中的某种颜色,如果找到该颜色,则单击它。 我遇到的问题是颜色的 RGB 值必须准确。 我想知道是否可以将图像转换为颜色很少的图像。 抱歉打扰了。我没有受过适当的训练。我现在
有谁知道为什么 CSS 为文本提供了 color,但没有 font-color 或 text-color? 看起来很反直觉,有点像text-decoration: underline 而不是font-
我想弄清楚为什么 mix-blend-mode: color; css 选择器和值会影响除白色以外的所有颜色,而不是影响除白色和黑色以外的所有颜色。有人可以向我解释为什么会这样吗? 最佳答案 来自 t
我正在尝试创建 Angular 2 主题,我按照网站上提到的教程进行操作。这是我的主题文件。 @import '~@angular/material/theming'; @include mat-co
我正在尝试更改 ProgressBar 中栏的颜色 pBar.setStyle("-fx-accent: green"); 但我遇到了一个问题:这似乎不适合我! (或者我只是不明白一些事情) 这是代码
给定最大迭代次数 = 1000 给我一些关于如何着色(红色、绿色、蓝色)的想法。我现在能想到的只有蹩脚的 2 种颜色渐变:( 真的有可能想出像这样美丽的东西吗? 最佳答案 该死的,他们不会让我一个新手
要将 url 参数解码为颜色,我使用此 HttpMessageConverter: public class ColorHttpMessageConverter implements HttpMess
我创建了一个显示色谱的自定义控件。我正在覆盖 OnRender() 方法以使用颜色绘制控件。由于某种原因,“计算”的颜色(R G B 值)具有一定的透明度,即使我将 Alpha 值 (A) 设置为最大
我是一名优秀的程序员,十分优秀!