动态改变图像颜色答案

【问题标题】：Dynamically changing image colours动态改变图像颜色
【发布时间】：2023-03-21 07:54:01
【问题描述】：

我正在开发一个将多个视图显示为表格的应用程序（例如客户、产品等）。每行的最后一列包含按钮，用户可以使用这些按钮对特定行执行一些操作。简化示例：

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

图像是透明的 png。每张桌子的按钮数量可能会有所不同，现在总共大约有 30 个。

我被要求对应用程序的 css 样式进行更改，因此现在不同的表格可以有不同的颜色，例如，客户表格现在有一些 grrenish 色调，项目之一是蓝色等等。此外，“奇数”表行的颜色与“偶数”行的颜色略有不同。如果它们被选中，行也会改变颜色。

问题在于设计规定按钮必须随着行改变颜色。这需要制作大量的按钮 - 颜色组合，并且将来会添加更多按钮。

我认为比分配设计师制作数百个不同颜色的按钮版本更好的方法是根据表格类动态制作它。我的问题是——最有效的方法是什么？该应用程序使用 php 作为服务器端语言，在客户端使用带有 jQuery 的 javascript。图像的问题在于它们不是单色的，而是使用多种颜色，所以我必须根据 css 类来操作它们的 HSL。

如果使用 php 更好，我可能会使用ImageMagick。问题是获取颜色与提供颜色非常接近的图像的最佳方法是什么。

【问题讨论】：

我只使用 CSS 样式并完全忘记按钮图像。
是的，这就是这样做的方式，但我必须坚持图片（客户决定）。
jQuery: there is a way to apply colour (tint) to an image?的可能重复
但不一样但他们想达到一样

标签： php javascript jquery css image-processing

【解决方案1】：

我会为此使用 jQuery 并设置 png 背后的颜色或关于表格的 css 类/es 的 png 的颜色。

不要使用太多像 Imagemagick 这样的 php，因为它会显着减慢页面的渲染速度。

看看 Pixastic (coloradjust)
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

或PaintbrushJS（颜色）
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

或CamanJS（着色）
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

或VintageJS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS

【讨论】：

我去看看。至于 Imagemagick - 我只会使用一次 - 例如检查是否有 edit-client-blue.png，如果没有，请创建它。

【解决方案2】：

您可以发布其中一张图片吗？因为如果它是透明的，如您所说，您可以设置包含这些图像的 a 的样式。

例如：

.actions > a {
    width: 40px;
    height: 20px;
    display: block;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
}

.actions > a.green {
    background-color: green;
    border-color: darkgreen;
}

.actions > a.orange {
    ...
}

等等。

【讨论】：

【解决方案3】：

我在我建立的一个网站上实现了一个非常相似的功能。我们允许用户从不同的布局（类似于您的 html）以及多种颜色、图像等调色板中进行选择。您绝对可以使用 jquery 来做到这一点：

在页面初始化时你可以做

$("head").append("<link>");

在某种更改事件（或重新加载数据）上。我的数据是通过 ajax 加载的

css = $("head").children(":last");  // or find your <link> that you'd replace
   css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: path_to_your_css
});

您可以通过这种方式更改任何您想要的东西，包括颜色和图像。

【讨论】：