Guru Meditation - Your browser do not support getImageData/setImageData!

Filter support lib   ...provides image filter capabilities for the CVI effect libs only! lab

Standard Filters

gamma


render
clear

gamma filter equals standard gamma correction (< 1 == darker and s > 1 == brighter). Arguments:

  • multiplier (0.0 - 255)

Speed is quite good (5 of 6)!

brightness


render
clear

brightness filter changes images brightness (< 1 == darker and s > 1 == brighter). Arguments:

  • multiplier (0.0 - 255)

Speed is quite good (5 of 6)!

contrast


render
clear

contrast filter changes images contrast (< 1 == lower and s > 1 == higher). Arguments:

  • multiplier (0.0 - 255)

Speed is OK (4 of 6)!

exposure


render
clear

exposure filter simulates changing the exposure of the image (< 1 == lower and s > 1 == higher). Arguments:

  • multiplier (0.0 - 255)

Speed is very good (6 of 6)!

Color Filters

invert


render
clear

invert filter reverses all colors of the image. This filter has no arguments. Speed is very good (6 of 6)!

solarize


render
clear

solarize filter negates all values greater then 127. This filter has no arguments. Speed is very good (6 of 6)!

tritone


render
clear

tritone filter applies 3 colors for low, mid, and high range according to the brightness of the image. Arguments array:

  • low range color ([r,g,b] triplet)
  • mid range color ([r,g,b] triplet)
  • high range color ([r,g,b] triplet)

Speed is OK (4 of 6)!

grayscale


render
clear

grayscale filter converts a color image into grayscale. This filter has no arguments. Speed is quite good (5 of 6)!

sepia


render
clear

sepia filter applies the well-known sepia coloring to the image. This filter has no arguments. Speed is OK (4 of 6)!

threshold


render
clear

threshold filter converts the image to black & white (< 1 == darker and s > 1 == brighter). Arguments:

  • multiplier of 127 (0.0 - 2.0)

Speed is quite good (5 of 6)!

Blur Filters

smooth


render
clear

smooth filter smoothes the image (result is similar to bluring). Arguments:

  • radius (0 - 8 px)

Speed is quite good (5 of 6)!

spinblur


render
clear

spinblur filter blurs by rotating the centered image through the z-axis. Arguments:

  • distance (0 - 64 px)

Speed is quite good (5 of 6)!

zoomblur


render
clear

zoomblur filter blurs by zooming the centered image through the z-axis. Arguments:

  • distance (0 - 64 px)

Speed is quite good (5 of 6)!

motionblur


render
clear

motionblur filter blurs by moving the image to a defined direction. Arguments array:

  • distance (0 - 64 px)
  • angle (0 - 360 °)

Speed is very good (6 of 6)!

tiltshift


render
clear

tiltshift filter creates a miniature faking effect by partly bluring the image. Arguments array:

  • unmask position (0.0-1.0)
  • unmask size (0.0-1.0) 0.4
  • vertical orientation (0 | 1)
  • blur radius (0 - 8)

Speed is OK (4 of 6)!

stackblur


render
clear

stackblur filter blurs the image (result is similar to gaussian blur). Arguments:

  • radius (0 - 180)

Algorithm by Mario Klingemann
Speed is very good (6 of 6)!

Alpha Filters

invertalpha


render
clear

invertalpha filter reverses the transparency of the image (alpha channel). This filter has no arguments. Speed is very good (6 of 6)!

alphamask


render
clear

alphamask filter creates an alpha-mask from a single image. This filter has currently no arguments. Speed is very good (6 of 6)!

multiplyalpha


render
clear

multiplyalpha filter multiplies the RGB values by the alpha values (premultiplied alpha). This filter has no arguments. Speed is very good (6 of 6)!

unmultiplyalpha


render
clear

unmultiplyalpha filter unmultiplies the alpha values from the RGB values (unpremultiplied alpha). This filter has no arguments. Speed is very good (6 of 6)!

Channel Filters

posterize


render
clear

posterize filter quantizes r, g and b channel to a limited number of levels. Arguments:

  • number of levels (1 - 16)

Speed is very good (6 of 6)!

adjustrgba


render
clear

adjustrgba filter adjusts the red & green & blue & alpha channel of the image. Arguments array:

  • red multiplier 0.0 - 255)
  • green multiplier 0.0 - 255)
  • blue multiplier 0.0 - 255)
  • alpha multiplier 0.0 - 255)

Speed is very good (6 of 6)!

adjustyuva


render
clear

adjustyuva filter adjusts the luminance & blue–yellow chrominance & red–cyan chrominance & alpha channel of the image. Arguments array:

  • luminance multiplier 0.0 - 255)
  • blue–yellow multiplier 0.0 - 255)
  • red–cyan multiplier 0.0 - 255)
  • alpha multiplier 0.0 - 255)

Speed is acceptable (3 of 6)!

adjusthsba


render
clear

adjusthsba filter adjusts the hue & saturation & brightness & alpha channel of the image. Arguments array:

  • hue multiplier 0.0 - 255)
  • saturation multiplier 0.0 - 255)
  • brightness multiplier 0.0 - 255)
  • alpha multiplier 0.0 - 255)

Speed is acceptable (3 of 6)!

colorkey


render
clear

colorkey filter set the alpha channel value to 0 if pixel color values are higher than min and lower than max rgb color. Arguments array:

  • min rgb ([r,g,b] triplet)
  • max rgb ([r,g,b] triplet)

Speed is very good (6 of 6)!

mixrgb


render
clear

mixrgb filter mixes into r, g, b channels with bluegreen, redblue, greenred. Arguments array:

  • channels ([r,g,b] triplet)
  • channels ([bg,rb,gr] triplet)

Speed is OK (4 of 6)!

chromakey


render
clear

chromakey filter set the alpha channel value to 0 if pixel hue & saturation & brightness matches. Arguments array:

  • hue 0 - 360)
  • hue tolerance 0.0 - 100)
  • min saturation 0.0 - 100)
  • min brightness 0.0 - 100)
  • max brightness 0.0 - 100)

Speed is OK (4 of 6)!

Convolution Filters

outline


render
clear

outline filter creates grayscaled outline images by different operators (e.g. sobel, prewitt...). Arguments array:

  • divisor (1 - 255)
  • bias (0 - 255)
  • operator STR*
*sobel|scharr|prewitt|kirsh|roberts
Speed is slow (2 of 6)!

convolve


render
clear

convolve filter performs 3x3 kernel convolutions via matrix arrays or as predefined filter names (e.g. blur, sharpen...). 3x3 matrix array: [[n,n,n],[n,n,n],[n,n,n]] Arguments array:

  • divisor (0 - 255) -1 == auto
  • bias (0 - 255)

Speed is slow (2 of 6)!

Special Filters

anaglyph


render
clear

anaglyph filter creates a 3D anaglyph from a single image (red-cyan glasses). This filter has currently no arguments. Speed is very good (6 of 6)!

multiple filters example


render
clear

A multiple filters example. In this case six filters are used. Every filter depends on the result of the previous filter. Filter array:

  • invert
  • sharpen
  • brightness
  • contrast
  • zoomblur
  • spinblur

Benchmarks*

filter nameOpera 9.62Firefox 3.xFirefox 3.5Safari 4.0
run
gamma
brightness
contrast
exposure
invert
tritone
solarize
grayscale
sepia
threshold
smooth
spinblur
zoomblur
motionblur
invertalpha
mixrgb
adjustrgba
adjusthsba
adjustyuva
posterize
colorkey
chromakey
outline
convolve
anaglyph
alphamask
tiltshift
stackblur
multiplyalpha
unmultiplyalpha
0.096
0.088
0.117
0.095
0.085
0.215
0.078
0.122
0.120
0.122
0.096
0.050
0.041
0.030
0.035
0.240
0.111
0.500
0.499
0.093
0.028
0.237
0.888
0.769
0.041
0.000
0.098
0.000
0.000
0.000
0.048
0.162
0.369
0.046
0.051
0.119
0.042
0.072
0.217
0.077
0.083
0.046
0.040
0.030
0.030
0.229
0.199
0.649
0.645
0.162
0.024
0.324
0.835
0.691
0.033
0.000
0.084
0.000
0.000
0.000
0.045
0.097
0.136
0.043
0.035
0.081
0.033
0.052
0.148
0.081
0.095
0.048
0.042
0.030
0.023
0.146
0.102
0.404
0.403
0.078
0.017
0.198
0.603
0.470
0.026
0.000
0.096
0.000
0.000
0.000
0.028
0.024
0.064
0.013
0.010
0.052
0.009
0.034
0.073
0.032
0.048
0.024
0.023
0.018
0.006
0.059
0.015
0.113
0.112
0.009
0.004
0.052
0.178
0.175
0.009
0.000
0.050
0.000
0.000
0.000

Results in Seconds.

Download

cvi_filter_lib.js 2.0 is only about 15 KB.


Supports: booklet.js, cvi_bevel.js, cvi_corner.js, cvi_corners.js, cvi_curl.js, cvi_edge.js, cvi_glossy.js, cvi_instant.js, cvi_reflex.js, cvi_slide.js, cvi_sphere.js, cvi_strip.js!

Download cvi_filter_lib.zip

labWYSIWYG-Editor


If you've found a bug or if you have ideas for further development, don't hesitate to contact me.


Restrictions: It uses unobtrusive javascript to keep your code clean and works only with canvas browsers supporting getImageData and setImageData, else it'll degrade and your visitors won't notice a thing.


Benchmarks* are made with the same image [128x128 pixel] and the same parameters as the demos above. Static lists made with my PPC Mac G4 1GB 1.25 GHz.


The Speedbars above are related to the fastest browser engine. In this case Safari 4 (namely webkit).