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).

Syntax

filter : [{#1 filter options},{#2 filter options}...];
options   e.g. {f: 'contrast', s: 1.5 }
f == STRING filter name e.g. "invert" Default: null (required)
"smooth" == Smoothes the image (result is similar to bluring).
"spinblur" == Blurs by rotating the centered image.
"zoomblur" == Blurs by zooming the centered image.
"tiltshift" == Miniature faking effect by partly bluring.
"motionblur" == Blurs by moving the image to a defined direction.
"stackblur" == Very fast bluring algorithm by Mario Klingemann (only if cvi_stackblur.js is loaded).
"alphamask" == Creates an alpha mask of the image [gray value to transparency].
"anaglyph" == Creates a 3D anaglyph from a single image [no args].
"invert" == Reverses all colors of the image [no args].
"multiplyalpha" == multiplies the colors by the alpha values [no args].
"unmultiplyalpha" == unmultiplies the alpha values from the colors [no args].
"colorkey" == Set alpha to 0 if pixel color values are higher than min and lower than max rgb color.
"chromakey" == Set alpha to 0 if pixel hue & saturation & brightness matches.
"invertalpha" == Reverses the transparency of the image [reversable if transparency > 0 && < 255].
"adjustrgba" == Adjust the red & green & blue & alpha channel of the image (r,g,b,a).
"adjusthsba" == Adjust hue & saturation & brightness & alpha channel of the image (h,s,b,a).
"adjustyuva" == Adjust luminance & blue–yellow chrominance & red–cyan chrominance & alpha channel of the image (y,u,v,a).
"grayscale" == Converts the image into grayscale [no args].
"threshold" == Converts the image to black&white (s<1 == darker and s>1 == brighter).
"solarize" == Solarizes the image by negating values > 127 [no args].
"posterize" == Posterizes the image by quantizing each channel to a limited number of levels.
"tritone" == Applies 3 colors for low|mid|high range according to the brightness of the image.
"mixrgb" == Mixes the RGB channels with the other two channels.
"sepia" == Applies the well-known sepia coloring to the image [no args].
"gamma" == Standard gamma correction (s<1 == darker and s>1 == brighter).
"brightness" == Change brightness (s<1 == darker and s>1 == brighter).
"contrast" == Change contrast (s<1 == lower and s>1 == higher).
"exposure" == Simulates changing the exposure of the image.
"outline" == Creates grayscaled outline images by different operators (e.g. sobel, prewitt...).
"convolve" == Use your own 3x3 matrix via option m=[[n,n,n],[n,n,n],[n,n,n]].

m == OBJECT kernel matrix e.g. [[n,n,n],[n,n,n],[n,n,n]] Default: null (optional)
s == FLOAT/OBJECT multiplier(s) e.g. 0-255 Defaults to... (optional)
1         if f=="stackblur" Radius (1-180) (only if cvi_stackblur.js is loaded)
1         if f=="zoomblur|spinblur" Distance (px 1-64)
1         if f=="smooth" Radius (px 1-10)
1         if f=="posterize" Number of levels (1-16)
1         if f=="threshold" Multiplier of 127 (0-2)
1         if f=="brightness|contrast|gamma|exposure" Multiplier of existing values (0-255)
[1,0]     if f=="motionblur" Distance (px 1-64) and angle (0-360)
[0.5,0.4, if f=="tiltshift" Unmask position (0.0-1.0) and size (0.0-1.0)
     0,4] and horizontal or vertical orientation (0|1) and blur radius (px 1-8) 
[auto,0]  if f=="convolve" or m!=null. Divisor of convolution result (-1==auto), 
	     ...useable for normalization and bias (0-255) for brightness addition
[1,0,     if f=="outline" Divisor of convolution result, bias (0-255) and
  'name']    ...operator ('sobel'|'scharr'|'prewitt'|'kirsh'|'roberts') 
[1,1,1,1] if f=="adjustrgba" red, green, blue, alpha. Multipliers of existing values (0-255)
[1,1,1,1] if f=="adjusthsba" hue, saturation, brightness, alpha. Multipliers (0-255)
[1,1,1,1] if f=="adjustyuva" luminance, blue–yellow chrominance, red–cyan chrominance, alpha. 
             ...Multipliers of existing values (0-255)
[0,0,0,0,0]  f=="chromakey" hue (0-360) and hue tolerance, min saturation, min brightness, 
             ...max brightness (0-100)
[[0,0,0], if f=="colorkey" equals rgb min and rgb max triplet (0-255)
 [0,0,0]] 
[[1,1,1], if f=="mixrgb" Mix into r, g, b with...
 [1,1,1]]    ...bluegreen, redblue, greenred as triplets [0-255,0-255,0-255]
[[0,0,0], if f=="tritone" low|mid|high range colors as...
 [0,0,0],    ...rgb triplets [0-255,0-255,0-255]
 [0,0,0]]

Remember: filter is a parameter of the following CVI-libs only: 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!

Hint: using multiple filters or big images may cause the browser to popup the "Slow script..." requester. That means the javascript interpreter needs to long to execute (more than 10-20 sec.). To change the behavior of the browser (e.g. Safari), go to the "Develop" menu and choose "Disable runaway Javascript timer".


Copyright

cvi_filter_lib.js 2.0 (13-Jan-2011) (c) by Christian Effenberger. All Rights Reserved.

cvi_filter_lib.js is distributed under the Netzgestade Non-commercial Software License Agreement. License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.
YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE. IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.