Ajaxschmiede.de

Der Däne Jacob Seidelin hat heute auf seiner Spielwiese http://www.nihilogic.dk/ die nächste beeindruckende Demonstration der Möglichkeiten, die Canvas bietet, aufgezeigt.

Nachdem Seidelin zuletzt vor allem an Umsetzungen von Spieleklassikern arbeitete, veröffentlichte er diesmal ein Online-Bildbearbeitungs-Tool namens Pixastic, das nur clientseitig im Browser läuft.

Pixatic ist kein vollständiges Bildbearbeitungsprogramm, das alle erdenkbaren Fotomanipulationsmöglichkeiten bietet, und soll auch niemals Adobe’s Photoshop und ähnliche Programme ablösen. Das Tool soll nur zeigen, was mit modernen Browser auf Grundlage von Canvas und Javascript alles erreicht werden kann, und grundlegende Funktionen zur schnellen, clientseitigen Bildbearbeitung bereit stellen.

Hinter einer primitiv gehaltenen Benutzeroberfläche (GUI) verbergen sich die üblichen Methoden zur Fotomanipulation wie Ausschneiden, Größe verändern und Drehen genauso wie einige Filter- und Effektfunktionen wie zum Beispiel das Anpassen von Helligkeit, Kontrast, Sättigung, Graustufen, Unschärfe und so weiter.

Mit einigen Einschränkungen läuft das Pixastic auf allen modernen Browser, wobei erhebliche Unterschiede bezüglich der Geschwindigkeit auftreten können. Opera 9.5 (Beta), Firefox 3 und die aktuellen nightly builds des WebKit bieten die beste Performance. Der Internet Explorer bleibt wegen fehlender Canvas-Unterstützung außen vor.

Als Bildquelle kann man sowohl Fotos vom eigenen Rechner hochladen oder aber eine URL angeben. Unterstützt werden alle gängigen Bildformate mit einer Auflösung von bis zu 1024×1024 und einer Größe von bis zu einem Megabyte. Desweiteren besteht die Möglichkeit seine bearbeiteten Bilder auf dem eigenen Desktop abzuspeichern.

Folgende Tastenkürzel hat Seidelin integiert (in Opera sollte man stets Ctrl+Shift anstelle von nur Ctrl drücken):

• Ctrl+C, Ctrl+X, Ctrl+V – Kopieren, Ausschneiden und Einfügen angewandt auf die ausgewählte Bildfläche
• Ctrl+Z – Rückgängig machen (bis zu maximal der letzten 10 Aktionen)
• Alt+Backspace / Ctrl+Backspace – einfärben der ausgewählten Bildfläche

Die ToDo-Liste für die Anwendung ist noch lang und reicht von dem Einbau einer Zoom- und Scrollfunktion über das Beheben etlicher Fehler bis hin zur Überarbeitung der gesamten Benutzeroberfläche.

An dieser Stelle möchte ich noch auf ein ähnliches Projekt namens Canvaspaint verweisen. Canvaspaint ist eine nahezu 1-zu-1-Kopie von Microsofts Paint, läuft jedoch wie Pixastic nur im Browser und bietet den selben Funktionsumfang.