动态变化的图像颜色 [英] Dynamically changing image colours

问题描述

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

I am developing an application which displays multiple views as tables (for example customers, products, etc.). The last column of each row contains buttons, using which the user can perform some actions on a specific row. Simplified example:

<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。

The images are transparent pngs. The amount of buttons per table can vary, now there are about 30 in total.

我被要求对应用程序css样式进行更改，因此不同的表现在可以不同的颜色，例如客户表现在有一些grrenish色调，项目一个是蓝色等等。此外，奇数表格行具有与偶数表格行稍微不同的颜色。

I was asked to make changes in the application css styles, so different tables can now have different colours, for example the customers table now has some grrenish tint, the projects one is blue and so on. Moreover, "odd" table rows have a slightly different colour than "even" ones. The rows also change colours if they are selected.

问题是，设计声明按钮必须随行而改变颜色。这需要做大量的按钮 - 颜色组合，并且将来会有更多的按钮添加。

The problem is that the design states that the buttons have to change colours along with the rows. This requires making lots of button - colour combinations, and there will be more buttons added in the future.

我认为一个更好的方法比设计器分配数百个版本的不同颜色的按钮是使它动态，取决于表类。我的问题是 - 什么是最有效的方法？应用程序使用php作为服务器端语言和javascript与客户端的jQuery。图像的问题是，他们不是单色，但使用多种颜色，所以我将不得不根据css类操纵他们的HSL。

I think a better way than assigning the designer with making hundreds of versions of the buttons in different colours is to make it dynamically, depending on the table class. My question is - what would be the most efficient way to do it? The application uses php as the server-side language and javascript with jQuery on the client side. The problem with the images is that they are not monochrome but use multiple colours so I would have to manipulate their HSL according to css classes.

如果更好的方式如果使用php，我可能会使用 ImageMagick 。

If the better way if to use php, I would probably use ImageMagick. The question is what is the best method to acquire an image coloured very closely to a provided colour.

推荐答案

我会使用jQuery来获取一个非常接近所提供的颜色的图片。这和设置在png或png背后的颜色关于css类/ es的表。

I would use jQuery for this and set the color behind the png or of the png regarding the css class/es of the table.

不要使用像Imagemagick这样的太多php，因为它会大大降低页面的呈现速度。

查看 Pixastic （颜色调整）

https://github.com/jseidelin/pixastic
http ：//www.pixastic.com/lib/docs/actions/coloradjust/

或 PaintbrushJS （颜色色调）< br>
https://github.com/mezzblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

或 CamanJS （colorize）

http ：//camanjs.com/

http://camanjs.com/ guides /＃BuiltIn

https://github.com/meltingice/CamanJS /

or CamanJS (colorize)
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

或 VintageJS

http://rendro.github.io/vintageJS/

https://github.com/rendro/vintageJS

这篇关于动态变化的图像颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！