动态改变图像颜色
我正在开发一个应用程序，它将多个视图显示为表格（例如客户，产品等）。 每行的最后一列包含按钮，用户可以使用这些按钮对特定行执行某些操作。 简化示例：
图像是透明的png。 每张桌子的按钮数量可能会有所不同，现在总共大约有30个。
我被要求对应用程序css样式进行更改，因此不同的表现在可以有不同的颜色，例如，customers表现在有一些粗糙的色调，项目一个是蓝色等等。 而且，“奇数”表行的颜色与“偶数”表略有不同。 如果选择它们，行也会更改颜色。
问题是该设计指出按钮必须随行改变颜色。 这需要制作许多按钮 – 颜色组合，并且将来会添加更多按钮。
我认为比指定设计师制作不同颜色的数百个按钮版本更好的方法是动态制作，具体取决于表类。 我的问题是 – 最有效的方法是什么？ 该应用程序使用PHP作为服务器端语言和javascript与客户端jQuery。 图像的问题是它们不是单色而是使用多种颜色，因此我必须根据css类操作它们的HSL。
如果使用php更好的方法，我可能会使用ImageMagick 。 问题是获取与所提供颜色非常接近的图像的最佳方法是什么。
我会使用jQuery并在png或png后面设置关于表的css类/ es的颜色。
不要像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
你可以发布其中一张图片吗？ 因为如果它像你说的那样透明，你可以设计包含那些图像的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 { ... }
等等。
我在我建立的一个网站上实现了一个非常相似的function。 我们允许用户从不同的布局（类似于你的html）中选择以及多个颜色，图像等调色板。你肯定用jquery做到这一点：
在初始化页面时，您可以执行此操作
$("head").append("");
在某种变化事件（或重新加载数据）。 我的数据是通过ajax加载的
css = $("head").children(":last"); // or find your that you'd replace css.attr({ rel: "stylesheet", type: "text/css", href: path_to_your_css });
你可以改变你想要的任何东西，包括颜色和图像。