Build a Simple Image Editor with CSS Filters and jQuery

Originally published at: http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery/

CSS Filters are a powerful tool to manipulate images using just CSS. Once implemented in all browsers, you will be able to apply effects to images without any need for external software.

CSS filters constitute a huge topic in themselves and I am not going to discuss all the available filters here. What I am going to talk about is how you can use multiple filters to produce a complex effect – and make your own image editor.

If you want to dig deeper, feel free to check out Filters on MDN or Understanding CSS Filter Effects, on HTML5 Rocks, both of which cover the general topic of filters in more detail.

CSS Filter Syntax

To write a filter effect in your CSS, just use filter: and name of the filter (like grayscale, blur, etc.).

.example {
  filter: <filter -function> [</filter><filter -function>];
}

Here’s how you would apply a 90% grayscale filter to an element:

.example {
  filter: grayscale(90%);
}

And in the case of webkit browsers, you’ll need a prefix:

.example {
  -webkit-filter: grayscale(90%);
}

The value of a filter’s property generally falls between 0 and 1, but there are a few exceptions. For example, the blur property uses pixel units and can be any whole number. Also, the hue-rotate filter value is a whole number with a ‘deg’ unit.

.example {
  filter: blur(10px);
}

.example-2 {
  filter: hue-rotate(90deg);
}

Combining Multiple Filters

You may combine any number of functions to manipulate the rendering. However, if you want to apply more than one filter effect, you can do so by space separating them in a single declaration. Here’s how you’d combine grayscale and blur:


Continue reading this article on SitePoint

Very informative article, thanks. How would you go about saving the edited version of this image?

Same here.

Hey! Thanks for reading my article and I am glad you liked it smile

Saving is difficult with current code because we are not changing the original pixels of the base image. As mentioned my Christian Heilmann in the GitHub issue, to facilitate saving we need to move the functionality to canvas. I'll work on it and post the code on GitHub and also in this article's comment section.

One dirty way would be capture screenshot, but I would NOT recommend that. I'm planning to build something which will allow you to get new image of the size of the original.

You might find this very helpful in the meantime: https://github.com/meltingice/CamanJS/

Hey Collins, thanks for taking out time to read the article smile

I've replied to the original comment with details. Please let me know if you need anything else. Happy to help!

Hi !
I am looking for an image editor for my project this example is amazing and I like it; but the only problem with this project is; that we can't modify the original image.
I have used Html2Canvas to get screenshot of edited image but it also doesn't work and still it take the original image color after editing of any image trough this editor.
any idea to solve this problem?

I am glad you like it Mohammad smile Here's the solution that you are looking for: http://camanjs.com/examples/ It modifies the original image. Hope it helps!

Amazing! I just need a favor or clarifcation. Is it possible to render the final image via html2cavnas? I tried manually to use filters but failed.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.