JS9 Image Filters

The Image Filter plugin allows you to apply image processing techniques directly to the displayed image without changing the underlying raw data. The web has an overwhelming amount of information about image processing. A good technical article concerning the use of image filters with Javascript and the HTML5 canvas is available at: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Note that the standard JS9 colormaps, scale, contrast and bias selections are applied to the raw data to regenerate the RGB image. Thus, if you use an image processing technique and then change colormap, contrast, bias, or scale, you will undo the applied image processing. This is a good way to reset the displayed image.

Several image processing filters and convolutions are available, many of which allow you to adjust a parameter using either a slider or by typing a value into the text box:

• blur(val): blur the image using a pseudo-Gaussian convolution
• brighten(val): add constant value to each pixel to change the brightness
• darken(val): darken by applying the kernel [ 0, 0, 0, 0, val, 0, 0, 0, 0],
• duotone(0|1|2): remove a color by setting it to the average of the other two, e.g. red=(green+blue)/2, where the input values are: 0 = red, 1 = green, 2 = blue
• edge(): detect edges using the kernel [ -1, -1, -1, -1, 8, -1, -1, -1, -1 ]
• emboss(val): produce embossing effect using the kernel [-18, -9, 9, -9, 100 - val, 9, 0, 9, 18 ]
• gamma(val): apply the nonlinear gamma operation, used to code and decode luminance values in video or still image systems: out = pow(in, val)
• invert(): the RGB channels of the image are inverted
• lighten(val): lighten the image by applying the kernel [ 0, 0, 0, 0, val, 0, 0, 0, 0 ],
• luminance():convert to greyscale using the CIE luminance: 0.2126*r + 0.7152*g + 0.0722*b [255-r, 255-g, 255-b, a]
• median(): noise reduction technique that replaces each pixel with the median of neighboring pixels
• noise(val): add random noise: pixel = pixel + Math.floor((Math.random()*(val)
• pixelate(val):make image look coarser by creating a square tiling effect of the specified size
• scatter(val): scatters the colors of a pixel in its neighborhood, akin to viewing through brittle cracked glass
• sepia(val): image takes on shades of brown, like an antique photograph
• sharpen(val): sharpen the image using the kernel [ 0, -3, 0, -3, val, -3, 0, -3, 0 ]
• sobel(): use the Sobel operator to create an image that emphasizes the edges
• solarize(val): which image is wholly or partially reversed in tone. Dark areas appear light or light areas appear dark.

Filters are cumulative: if you apply a filter and then apply a second filter, the latter changes the current RGB color values that were modified by the first filter.

You can undo the effects of the current filter by clicking the undo [filter] button. This reverts the image to the colors used in the previous filter. The undo operation is applied to the current filter, allowing you to unwind the filters back to the original image colors. The reset operation unsets all filters. (You can, of course, unset all filters at once by changing the colormap, contrast, bias, or scale.)