Guymon

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.

Firefox 3.5

Auf hacks.mozilla.org gibt es einige interessante Beispiele was mit Firefox 3.5 möglich sein wird. Zwei Dinge die mir ins Auge gesprungen sind:

Firefox 3.5 includes a simple JavaScript API that allows you to quickly geo-enable your web application. It allows users to optionally share their location with websites without having to type in a postal code.
(…)
Content Aware Image Resizing is a way to re-target an image size without modifying its content ratio, in other words : non-linear image resizing.

Canvas painting application

Dev.Opera erklärt die grundlegenden Schritte für eine cavas basierte Painting Application.

Das Tutorial basiert auf dem Projekt Paint.Web.