O'Reilly logo

Mastering jQuery by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating simple filters manually

The key to creating our own filters (and as is the case with many prebuilt plugins), is to use the <canvas> element and familiarize ourselves with the getImageData method. We can use the latter to manipulate the color channels within each image to produce the desired effect.

We could spend time talking about using this method in detail, but I think it would be far better to see it in action. So let's dive in and use it to create a couple of filters manually, beginning with grayscaling an image.

Grayscaling an image

For the first demo of three, we're going to desaturate the colors in a copy of the flowers.jpg image that we've been using throughout this chapter. This will give it a grayscale appearance.

Note

You may get ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required