Colores de imagen cambiantes dinámicamente

Question

Estoy desarrollando una aplicación que muestra varias vistas como tablas (por ejemplo, clientes, productos, etc.). La última columna de cada fila contiene botones, con los cuales el usuario puede realizar algunas acciones en una fila específica. Ejemplo simplificado:

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

Las imágenes son png transparentes. La cantidad de botones por mesa puede variar, ahora hay alrededor de 30 en total.

Me pidieron que hiciera cambios en los estilos CSS de la aplicación, por lo que diferentes tablas ahora pueden tener diferentes colores, por ejemplo, la tabla de clientes ahora tiene un tinte intenso, los proyectos uno son azules y así sucesivamente. Además, las filas de mesas "impares" tienen un color ligeramente diferente que las "pares". Las filas también cambian de color si se seleccionan.

El problema es que el diseño indica que los botones tienen que cambiar los colores junto con las filas. Esto requiere hacer muchas combinaciones de botones y colores, y se agregarán más botones en el futuro.

Creo que una forma mejor que asignarle al diseñador cientos de versiones de botones en diferentes colores es hacerlo dinámicamente, dependiendo de la clase de tabla. Mi pregunta es: ¿cuál sería la forma más eficiente de hacerlo? La aplicación utiliza php como el lenguaje del lado del servidor y javascript con jQuery en el lado del cliente. El problema con las imágenes es que no son monocromáticas, pero usan colores múltiples, así que tendría que manipular su HSL según las clases de CSS.

Si la mejor manera de utilizar php, probablemente usaría ImageMagick. La pregunta es cuál es el mejor método para adquirir una imagen coloreada muy de cerca a un color proporcionado.

Answer 1

Yo usaría jQuery para esto y establecería el color detrás del png o del png con respecto a la clase/s css de la tabla.

No use demasiado php como Imagemagick porque ralentiza la renderización de la página de forma espectacular.

echar un vistazo a Pixastic (coloradjust)
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

o PaintbrushJS (color de la tinta)
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

o CamanJS (colorear)
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

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

Answer 2

he implementado una característica muy similar en un sitio que he construido. Permitimos a los usuarios seleccionar entre diferentes diseños (similar a su html) así como múltiples paletas de colores, imágenes, etc.Definitivamente esto con jQuery:

sobre inicio de la página que se puede hacer

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

en algún tipo de evento de cambio (o recarga de datos). Mis datos se cargan a través de 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 
}); 

Puede cambiar todo lo que desee, incluidos los colores y las imágenes.

Answer 3

¿Se puede publicar una de esas imágenes? Porque si es transparente como dices, simplemente puedes diseñar el a que contiene esas imágenes.

Por ejemplo:

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

Y así sucesivamente.