Image Processing

I'm learning image processing. The web is furnished with almost every rendering tool and trick, so I thought it'd be fun to apply it in the frontend.

The below application takes an image and allows the following transformations:

  • Creation of a greyscale / intensity / brightness image (this has a million terms)
  • A histogram equalization of the above intensity image (not applicable to the color images because ... would take too long)
  • Quantization (reducing the range of values each pixel can take ex. [0, 255] for k = 2, [0, 85, 170, 255] for k = 4)
  • Logarithmic (logarithming the pixel value and multiplying by a constant)

I'll probably add more transformations in a separate article; I just wanted to cap this off for now, as this can literally go on forever.

The program transforms the image and also generates histograms for RGB values for the image (or the brightness values for intensity images).

The histograms were to be used for thresholding and power laws ... next time.

The code makes use of HTML's canvas element, which can take in image URLs and represent them as RGBA values in a flat array.

The transformations output RGBA values in the same data format.

The histograms really strained the processing time, so a Web Worker was set up to offput the computation onto another thread.

Anything else? Ah, the Worker makes use of a nifty API to directly transfer the image bytes to the Worker so as to reduce computation time.

As image transformations require more data and images get bigger, I am sure I will need to figure out more performant mechanisms.

(I can't really separate the histogram ... I could spin up multiple workers and do parallel work ... or I could make use of look-up tables which is a known image processing technique... Another option is to cancel Worker work in the case of rapid changes.)

I also didn't figure out a way to represent the metrics of the histograms well; hard to figure out where to put the labels and how to ensure the text isn't too small. I could use tooltips, but I didn't want to implement a tooltip mechanism or install one.

Well, stuff to think about.

Processing image...