Build a Simple Image Editor with CSS Filters and 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.

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

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:

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

Building the Image Editor

Our image editor will have two parts:

A URL field and Image container, to allow loading an image through an external URL.

Controls, which will be sliders to apply different effects on the loaded image.

URL Field and Image Container

We will use two form elements to ask for an image URL: A text input and a button. Then we will load the image present at the URL in our imageContainer div.

Controls

This is the heart of our application and this is where we will actually operate on our original image to convert it into something different.

To take values for different filters, we will use range selectors. This will allow us to see the effect of our changes instantaneously. Here’s the code to add two range selectors – one for grayscale and another for blur (for simplicity, there are only two examples here, but the original code has 9 options):

Demo and Full Code

Now that you are aware of all the power CSS provides you to manipulate an image, you should surely give the filter property a try in your next project. If you are interested, you can go ahead and try adding following functionalities to the current app and make it more useful:

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.

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?