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.
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.
You may get ...