I don't know if it's true, but once I heard a story about a certain very popular picture sharing network that didn't get the traction until it added filters for users.

Story had it that users were insecure that their photos didn't look professional enough without a sepia for example.

Well, regardless of how much truth the story has image filters are here to stay, along with their AI powered siblings.

Of course, it's important to keep being oneself, but some pictures just look better in black and white, don't you think?

And who knows, maybe one day you'll be implementing a service that needs just a little bit of image magic.

Image filters: requirements and recipe

As a user I'd like to see image with different filters, so that I'd be able to choose which one makes the picture looks better

There are plenty of filters one could apply: the built in CSS filters give us ability to control saturation, contrast, light and hue among other things.

Here's what you could do with them:

As always, user interface is up to you as long as it meets the requirements:

Requirements

1. User should be able to pick an image they'd like to apply filters to
2. User should be able to choose one from a set of pre-defined filters
3. User should be able to preview selected filter

Recipe

1. Decide on the filters you'd like to use
2. Create a static markup of the interface with a static image
3. Create static images with filters applied (e.g. for the selectors)
4. Add ability to select an image
5. Add ability to apply filter to selected image
6. Enjoy!

Hints

You can use css filters - they are quite performant with the exception of blur perhaps.

You can use hidden file input element to be able to pick an image.

Hard Mode: Saving an Image with filters

Of course, you could always take a screenshot, but for an actual service it'd be nice to be able to allow users to download or post their images with the filters applied.

And one way to do it - is apply those filters over the image drawn to a canvas. After all, it's "just" a little bit of math operations ;-)

You can use 2D context and handle it pixel-by-pixel, or, for an extra challenge, you could reimplement same filters using other contexts, e.g. WebGL.

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?