Динамически меняющиеся цвета изображения

Question

Я разрабатываю приложение, которое отображает несколько представлений в виде таблиц (например, клиенты, продукты и т. Д.).Последний столбец каждой строки содержит кнопки, с помощью которых пользователь может выполнять некоторые действия в определенной строке.Упрощенный пример:

<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 приложения, поэтому теперь разные таблицы могут иметь разные цвета, например, таблица клиентовимеет немного шероховатый оттенок, проекты один синий и так далее.Кроме того, «нечетные» строки таблицы имеют немного другой цвет, чем «четные».Строки также меняют цвета, если они выбраны.

Проблема заключается в том, что дизайн утверждает, что кнопки должны менять цвета вместе со строками.Это требует создания множества комбинаций кнопок и цветов, и в будущем будет добавлено больше кнопок.

Я думаю, что лучший способ, чем назначение дизайнера сотнями версий кнопок разных цветов, - это созданиеэто динамически, в зависимости от класса таблицы.У меня вопрос - какой самый эффективный способ сделать это?Приложение использует php в качестве языка на стороне сервера и javascript с jQuery на стороне клиента.Проблема с изображениями состоит в том, что они не монохромные, а используют несколько цветов, поэтому мне придется манипулировать их HSL в соответствии с классами CSS.

Если лучше использовать php, я бы, вероятно, использовал ImageMagick .Вопрос в том, как лучше всего получить изображение, окрашенное очень близко к заданному цвету.

Answer 1

Я бы использовал для этого jQuery и установил цвет за png или png относительно класса / классов css таблицы.

Не используйте слишком много php, как Imagemagick, потому что это значительно замедляет рендеринг страницы.

взгляните на 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

Answer 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 {
    ...
}

и т. Д.

Answer 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
});

Вы можете изменить все, что хотите, включая цвета и изображения.