Image/Video Processing and the Canvas Element

HTML5

• Client-Side Local Storage• Canvas Element• Video• SVG, MathML• Other new elements

ruby, article, etc.• New attributes for elements• more ..

The Canvas Element

• 2d graphics and transformations• 3D graphics based on WebGL

(OpenGL ES for the web) – standard in the works

ExamplesCanvex

Canvasdemos.com

Javascript Libraries

• WebD – jQuery, Dojo,YUI,mootools, . . .

• Web UI dev - MochaUI

• Image processing with canvas – Pixastic

• Data visualization with canvas - Processing

Project CanvasVisor

• Port OpenCV to javascript• OpenCV – collection of 500+

image processing and computer vision algorithms

Why ?• allows applications where tasks are

accomplished pre-upload ->automatic tagging, editing,filtering

• With Tracemonkey, javascript CAN compete with natively compiled code

• Will be easier to work with

than a C library (easier to update,modify)

• Next generation UIs will be on the canvas• Hasn’t been done yet : )

What you'll Learn

• Image Processing Algorithms and methodologies

• Learn to use html5 along the way• Collaborative Development and

Community ethics• Standard practices• Additional eggs of learning –firefox

javascript engine, server-side processing, distributed computing

Thank You