Idea: colorize an image

[thany]

The idea is that you'd have black&white images on disk, and have Compass colorize black pixels with a certain color value, leaving transparency intact. This would be very cool where css-generated images or svg are not an option, while still keeping the flexibility of being able to change colors.

The image would probably have to be included as a data-uri, which is fine.

So, for example, an image like this: Turned into this: By something like this:

.striped { background: colorize-image(striped.png, #e2e4da); }

Which would produce something like this:

.striped { background: url('data:image/png;base64,...');

Good idea?

I'm currently using 1.0.0.alpha.19 and I couldn't find a function quite like this, so I assumed it doesn't exist, therefore, a friendly suggestion ;)

(and yes, I know i could theoretically write an extension to do this, but ruby isn't exactly my kind of language atm)

[lolmaus]

It would be relatively easy to implement for embedding the colorized image into CSS with a base64 encoding. You could probably do it yourself with a Ruby-backed Sass function leveraging MiniMagick.

Otherwise, you have to deal with saving generated images to disk, caching and maybe spriting. It's a lot more work.

[scottdavis]

Sounds like a great idea for an extension!

Sent from my iPhone

On May 15, 2014, at 11:30 AM, lolmaus notifications@github.com wrote:

It would be relatively easy to implement for embedding the colorized image into CSS with a base64 encoding. You could probably do it yourself with a Ruby-backed Sass function leveraging MiniMagick.

Otherwise, you have to deal with saving generated images to disk, caching and maybe spriting. It's a lot more work.

— Reply to this email directly or view it on GitHub.

[thany]

I've gotten a base64 extension to work in the past, for inlining generated svg. But in this case, svg generating was nothing but string concatenation. I'm not familiar with minimagick... would it be able to do what I need? Or at least the colorizing part?

[lolmaus]

1. Compass bundles the inline-image() Sass function and it works both with bitmap and vector images. But it is only useful for fetching images from disk. If you're going to create a custom Sass function, you'll have to encode images yourself. It's not difficult, you can have a look how inline-image() does it with Ruby.
2. MiniMagick is a Ruby library to process bitmap images. Supposedly, you can utilize it to take an image, colorize it and pass further.
3. MiniMagick might be incapable of colorizing vector images (SVG), i'm not sure.

4. Here's my workflow to fetch icons from Fontello and embed them into CSS as colorized SVG images.

   1. Visit Fontello, select icons you want, download the package, extract config.json into your project root and rename it to fontello.json.
   2. Use the fontello-svg Node library to fetch icons from Fontello. The library automatically converts icons into separate SVG files. You can provide a list of colors and fontello-svg will generate different color versions of each SVG file.
   3. Use a custom Grunt task to automate the routine.
   4. In your Sass, have a list of color variables with names and values equal to the ones that you create colorized SVGs with.
   5. Use a Sass mixin to simplify icon usage.

   Here you can find all the code mentioned: https://gist.github.com/lolmaus/7ae7b1b51738a1b9a42e