动态更改图像颜色

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

<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作为服务器端语言和javascript与jQuery。图像的问题在于它们不是单色的，而是使用多种颜色，所以我将不得不根据css类来操作HSL。

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

来源

2011-11-23 Przemek

我只会使用CSS样式并完全忘记按钮图像。 –

是的，那将是这样做的方式，但我必须坚持图像（客户决定）。 – Przemek

[jQuery的可能的重复：有一种方法来应用颜色（色调）的图像？]（http://stackoverflow.com/questions/4416007/jquery-there-is-a-way-to-apply-colour - 一个图像） – Spacedman

我会为此使用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

来源

2011-11-23 12:18:31

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

我实现了在一个网站非常相似的功能，我已经建立。我们允许用户从不同的布局（类似于您的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 
});

你可以改变任何你想要的方式，包括颜色和图像。

来源

2011-11-23 13:05:24

你可以发布这些图像之一吗？因为如果你说的是透明的，你可以设计包含这些图像的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 { 
    ... 
}

等。

来源

2011-11-23 13:14:23

动态更改图像颜色

回答

相关问题