Guymon

HTML5 Video And Canvas

Sean Christmann hat mit dem HTML5 Video Element und Canvas herumgespielt.

The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below. Blowing apart fragments of video and 3D Video

Canvas/jQuery: Bar Graphing Plugin

Ein sehr ausführliches Tutorial in zwei Teilen über Canvas und jQuery Plugin Entwicklung.

In this two-part series, we’ll combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this second part, we are going to convert it in to a jQuery plugin, and then add some eye candy and additional features.

HTML5 video + canvas

Krass was mit canvas alles so geht:

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

JavaScript: TransM

Christian Effenberger stellt eine neue JavaScript Bibliothek für Bild Manipulationen vor: TransM.

transm.js 1.0 allows you to add programmable image transitions to your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari 2+, Chrome 3+ and IE 6+. Works also on older browsers supporting JS 1.5 and images and filter or opacity, else it’ll degrade and your visitors won’t notice a thing.

Die Beispiele sehen wirklich cool aus. Muss ich mal testen.

jQSlickWrap

jQSlickWrap implementiert als jQuery Plugin den Sliced and Diced Sandbags Ansatz von A List Apart.

jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.

Und so funktioniert es:

1. If necessary, pre-load the image.
2. Determine the CSS styles for the image (float and padding).
3. Create a <canvas></canvas> element and set its dimensions to the size of the image plus its padding.
4. Draw the image onto the canvas in the top-left location.
5. Figure out the “background” color of the image by examining the pixel data at the top-left corner of the image.
6. Fill the <canvas></canvas> with this background color.
7. Re-draw the image contents onto the <canvas></canvas>, but now in the correct location as specified by its padding.
8. Iterate through the image to find the “edge” of the image’s contents at each row - save this width. (the size of a row is defined to be the resolution in the settings to a call to slickWrap).
9. Using the widths collected in the previous step, generate <div></div> elements of those sizes.
10. Float the <div></div>s to the correct side, and set their clear style to the same side.
11. Set the background-image to a non-repeating image described by a call to canvas.toDataURL() for the original’s containing element.
12. Hide the original image.