The colorize.php script allows template images to be colorized on-the-fly, making it possible to do more sophisticated web designs, yet still control the overall color scheme via Molly's config module.Transparency is supported for PNG and GIF templates. Output format is PNG.
This page is just a quick demo of how the script works.
Here is a greyscale test image:
By using colorize.php in either an <img> tag or a CSS style we can render that same image in color. In the example below, we are using this HTML:
<img src="../decor/colorize.php?template=test_pattern.png&color=00FF00" alt="Test Pattern" width="300" height="300" />
More sophisticated effects can be achieved by starting with a colored template image such as this:
and then adding an additional color (in this case red):
<img src="../decor/colorize.php?template=test_pattern_green.png&color=FF0000" alt="Test Pattern" width="300" height="300" />
Here is a greyscale test image:
By using colorize.php in either an <img> tag or a CSS style we can render that same image in color. In the example below, we are using this HTML:
<img src="../decor/colorize.php?template=test_pattern.gif&color=00FF00" alt="Test Pattern" width="300" height="300" />
More sophisticated effects can be achieved by starting with a colored template image such as this:
and then adding an additional color (in this case red):
<img src="../decor/colorize.php?template=test_pattern_green.gif&color=FF0000" alt="Test Pattern" width="300" height="300" />
Here is a greyscale test image:
By using colorize.php in either an <img> tag or a CSS style we can render that same image in color. In the example below, we are using this HTML:
<img src="../decor/colorize.php?template=test_pattern.jpg&color=00FF00" alt="Test Pattern" width="300" height="300" />
More sophisticated effects can be achieved by starting with a colored template image such as this:
and then adding an additional color (in this case red):
<img src="../decor/colorize.php?template=test_pattern_green.jpg&color=FF0000" alt="Test Pattern" width="300" height="300" />