Bildbearbeitung mit Javascript
„Bildbearbeitung mit Javascript“ – das klingt zunächst seltsam. Javascript wird im Webbrowser ausgeführt. Dort Bildbearbeitung zu betreiben, erscheint zunächst fragwürdig. Mit PhotoType geht das, wenn auch mit Hilfe eines kleinen PHP-Scripts, welches die Berechnungen auf dem Server erledigt.
Das auf Prototype basierende Script kann Bilder skalieren, kippen, spiegeln und rotieren sowie Schatten, Bilder und Texte einfügen (lassen). Beispiel:
l_oImage = new Photo().load("image.jpg").resize({width:200}).rotate(3).dropShadow();
l_oImage.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oImage.fetch());
Auf Deutsch: Lade das Bild „image.jpg“, skaliere es proportional auf 200 Pixel Breite, rotiere es um drei Grad gegen den Uhrzeiger und gib dem Bild einen Schlagschatten. Füge dann die Bildunterschrift „Get ajaxorized!“ in der Schrift „1942.ttf“ hinzu und mache das Bild zu einem Kindobjekt des Body-Tags, damit es im Browser angezeigt wird. Das ist unbestritten einfach und kann durchaus eine Erleichterung beim Entwickeln von Web-Applikationen sein.
Insbesondere für Content Management-Systeme sind diese Funktionen interessant, weil man so gleich mehrere Produktionsschritte für bebilderte Artikel vereinfachen oder gar automatisieren kann. Allerdings: Das alles geht zur Not auch ohne Javascript, so dass PhotoType erstmal eine nette Spielerei bleibt, dessen Einsatz allenfalls in Spezialfällen sinnvoll ist.
Entwickler sollten sich jedoch nicht ohne Skepsis auf PhotoType stürzen. Das Skript verarbeitet ungeprüft GET-Variablen, was es, je nach Vorbedingung, anfällig für Injection-Angriffe machen kann. Außerdem sollte das PHP-Script einen Cache-Mechanismus bekommen. Erzeugt man bei jedem Seitenaufruf das Bild aufs neue, würde die Serverlast stark ansteigen.
Fazit: Auf PhotoType hat die Welt zwar nicht gewartet. Die Software findet aber bestimmt ihre Nische und wird dort ihre Vorteile ausspielen.
Für solche Funktionen ist doch eigentlich das Canvas-Element gedacht oder nicht.
Ich find die Idee die Bilder am Client bearbeiten zu können schon gut, da die Bilder dann erst gar nicht auf den Server geladen werden müssen. Ich habe einige Kunden, die beispielsweise 1-2 x pro Woche 100 Fotos in s Netz stellen müssen. Die Fotos haben eine Größe von > MB. D.h. ich habe meinen Kunden einen ImageResizer (Unter Apple: ThumbsUP) installiert, der die Fotos mit einem Klick kleiner macht. Das kleiner machen könnte man sich dann sparen oder?
Hallo Leute,
ich möchte meine eigene Webseite erstellen gehöre aber zu den Anfängern überhaupt.Ich habe Notepad++ und FileZilla geladen und mir natürlich auch ein Buch für Anfänger gekauft aber irgendwie komme ich nicht richtig weiter.Wie soll ich den nun richtig vorgehen? Und wie funktioniert JavaScript kann mir das jemand genau und kurz erklären? Ich arbeite sonst nur mit Photoshop und InDesign.Bitte um Rat und Hilfe.
Gruß, Anna
Also das ist schon sehr sinnvoll, vor allem wenn man in Communities oder sonstwo persönliche Bilder nur in bestimmten Formaten zulässt. Da kann man den Leuten „live“ anbieten, wie Ihr Bild ausschaut und kann es eventuell drehen, zuschneiden oder was auch immer tun lassen, bis es passt.
Ist doch ganz gut geeignet für Portale wie Myspace usw.
So können die Nutzer bei ihren (meist hässlichen Seiten), auch noch die Bilder individuell anpassen.
Wie geil! Wuste gar nicht das so was möglich ist!
@Need_you: Also ich würde niemanden selbst bestimmen lassen, wie ein Bild auszusehen hat. Wenn dann gebe ich Parameter, wie Wasserzeichen, Neigungswinkel oder Schlagschatten selbst im Vorfeld an.
Gut für ne „Photoshop Online“ Version macht das vielleicht noch irgendwo Sinn, aber im normalen Webdesigner-Alltag ist das Script glaub ich nicht zu gebrauchen.
Gruß
ProfessorWeb
@ProfessorWeb
Ist zur Abwechslung mal andersrum. Java-Entwickler haben ja auch immer so tolle frameworks, mit denen sie ohne eine Zeile JavaScript zu schreiben, JavaScript-Widgets ins Frontend rendern können.
Aber du hast recht. Der Weg ist komisch.
@ProfessorWeb: Ich glaub das JavaScript ist dafür notwendig, dass man das Bild im Browser „live“ drehen kann usw.
Wäre es nur mittels html und php würde es doch nur sozusagen aus eingabefeldern bestehen, und man würde das ergebnis erst sehen, wenn man alle einstellungen getätigt, und auf „ok“ geklickt hat, oder?
Das Script kommt mir sehr gelegen: So kann ich mich als Webmaster zurückhalten und die Benutzer können ihre Bilder auf die Homepage der Pfadi Helfenberg hochladen, und nachträglich z.B. die Bilder drehen, oder einen Text dazuschreiben. Besonders gut gefällt mir die Funktion
l_oPhoto.addChuckNorris(); // every library should have this function imo;-)ProfessorWeb: Natuerlich kann man das in mehreren Schritten mit x-mal neuladen direkt in PHP machen. Aber warum, wenn man es auch – AJAX-like – wie in einer Anwendung handeln kann? Vom Bedienaspekt her ist das sicherlich der benutzerfreundlichere Ansatz (ein vernuenftiges GUI natuerlich vorausgesetzt).
Ich wollte gerade sagen… alles das geht auch ohne JavaScript. Da die Berechnung der Bilder eh auf dem Server per PHP passiert, frage ich mich wo dort überhaupt der Sinn drin liegt, das ganze über JavaScript zu steuern… o.0