201008Apr

Wadda: Interaktive Canvas-Lupe für Bilder

Dass mit dem neuen canvas-Element von HTML5 interessante Möglichkeiten eröffnet werden, dürfte mittlerweile bekannt sein. Mozillas Bespin zählt wohl zu den bekanntesten Projekten, die auf die Canvas-Methode setzen. Aber auch realistische Beleuchtungen sind möglich und Google hat kürzlich Quake 2 in Canvas und WebGL umgesetzt.
Eine schöne Idee für den Einsatz von Canvas kommt nun von dem Entwickler und Freelancer "MaXPert" — er stellt mit Wadda eine interaktive JavaScript-Lupe bereit, die Canvas verwendet, um einen Bildbereich eines Bildes (img) zu vergrößern. Dazu muss der Mauszeiger über ein Bildelement bewegt und die linke Maustaste betätigt werden.

Wadda

In einer Demo kann man sich von dem modernen Effekt überzeugen. Natürlich ist er nur mit Browsern möglich, die das Canvas-Tag unterstützen. Neben verschiedenen Zoom-Stufen lässt sich noch ein weicher Übergang der Linse einstellen, die zur Vergrößerung genutzt wird. Das Skript benötigt kein Framework und wird benutzt wie folgt:

  • // HTML
  • <img src="bild.jpg" id="lupe" title="bild.jpg" />
  •  
  • // JavaScript
  • var wad = new Wadda("lupe", {
  • lensSize: 150,
  • xOff: 0,
  • yOff: 0,
  • fadeLens: true,
  • zoom: 2
  • });

In den Einstellungen lässt sich also die Zoom-Stufe, die Linsengröße sowie ein Versatz (Offset) zur Mauszeiger-Position einstellen. Das Skript ist unkomprimiert knappe 10 KB groß und kann in so manchen Projekten sicherlich gebraucht werden.

RSS-Feed abonnieren