Creating Image Filters in JS

I spent the last two weeks on a project that I hoped would help me obtain a concrete understanding of how image kernels work. You know those image filters you have in Photoshop or your typical photo editor app that let you sharpen or blur an image? Those are implemented using image kernels. This blog post has by far the best explanation of image kernels I could find. For something a little more formal, here's Wikipedia.

The demo is online and I've given the link to it below. What you'll see is a simple page with some instructions at the top. Feel free to play around with the kernel and sample images.

The image is split into four partitions and each partition is passed to a web worker to be processed so we don't block the main thread. I found that four web workers are only a little over twice as fast as one web worker processing the entire image alone. I expected four times the speed, but I guess I got too optimistic, not considering the overhead in copying the pixel arrays, etc.

I can conclude that I now do have a better understanding of how image kernels work (aside from the fact that I ended up spending way more time working with web workers). If only this could get me extra credit for my image processing course.

Here's the demo and the repository:

mebble / imfx

Apply a filter to an image through kernel convolution

ImFx

Perform client-side image processing algorithms like:

• Spatial domain filtering
• Bit-plane slicing

Check out the demo.

What it does

• Takes an image
• Takes a kernel
• Applies kernel convolution on the image
• Displays the output

What it looks like

The kernel for image sharpening

The kernel for edge detection

Sharpening an image of a cat in a hat (Source: Photo by rawpixel.com from Pexels)

Edge Detection on an image of skeletons on the street (Source: Photo by Iván Rivero from Pexels)

TODOs

• Choose updatable kernel from templates
• Choose from a selection of images
• Split and process image across 4 workers
• Log the time taken to process image. Can log the time taken separately for each worker
• Implement more image processing stuff
  • min/max/median filters
  • Separable filters for faster convolution
  • Bit-plane slicing
• Use WebGL for fast processing in each worker
• Upload image from device
• Take camera photo and use image
• …

View on GitHub