dynamische Bildeffekte via JS?

[kev52]

Hallo,

ich bin schon wie wild am googlen aber noch nicht so richtig sicher:

Ich will Bilder verfremden z.B. Blur-Effekt, Mosaik etc. geht so etwas via JavaScript oder ist das eine Aufgabe für ActionScript? Super wäre eine JS Lösung da die Seite auch auf dem iPhone laufen soll.

Würde mich über nützliche Links freuen!

DANKE

[CaselPasel]

Hey,
du kannst es auch mit JavaScript machen.
Ist nur die Frage was du genau haben möchtest mit Blur und Mosaik kann man nicht viel anfangen.
Schreib doch mal ganz genau auf was du haben möchtest.
Wie die Bilder angezeigt werden in standard mode.
Und was mit den Bilder Passieren soll durch ein Event.

Mit freundlichen Grüßen

Cas

[Martin Kraft]

Möglich, dass sowas mit HTML5 hinzubekommen wäre. In Flash geht das alles definitiv.

Wenn Du nicht ausschließlich fürs iPhone entwickelst, solltest Du Dir aber bewusst sein, dass Du mit HTML5 zwar die iPhone-Nutzer erreichst aber z.Z. alle InternetExplorer-Nutzer ausschließt (und das sind immer noch an die 50%).

Außerdem dürften so rechenintensiver Dinge wie Blur über eine Scriptengine auf dem iPhone schnell an Performancegrenzen stoßen...

[CaselPasel]

Hey,
dafür ist HTML5 nicht nötig.
Sowas nennt sich DHTML.

Mit freundlichen Grüßen

Cas

[CaselPasel]

Hey,
hier mal ein Blur Effekt.

Pixastic: JavaScript Image Processing : Blur

Mit freundlichen Grüßen

Cas

[Martin Kraft]

Naja...

PHP-Code:

<canvas width="400" height="300" style="" title="" class="" tabindex="-1" id="demoimage"></canvas> 


...klingt für mich schon ziemlich nach HTML5?

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well.

Im IE wird das dann über proprietäre Filter simuliert. Deshalb führt Deinem Beispiel in verschiedene Browser auch zu so unterschiedlichen Ergebnissen (die meiner Meinung nach qualitativ weiter hinter dem liegen, was mit Flash möglich ist).

Das erhöht zudem den Entwicklungsaufwand und dürfte spätestens bei spezielleren Aufgaben an seine Grenzen stoßen. Das ist ja einer der Gründe dafür, das diese DHTML-Techniken, die es ja schon seit fast 10 Jahren gibt, in der Praxis kaum eingesetzt werden.

Soweit ich das überblicke, ist eine vernünftige und standartkonforme Bitmap-Bearbeitung in HTML erst durch <canvas> möglich geworden. (Ich lasse mich aber gern eines Besseren belehren).

[CaselPasel]

Hey,
@Martin Kraft hast recht das gehört zu HTML5.
Man kann es aba mit einen Overlayer auch realisieren, der das Bild verzerrt.
Und ein User wechselt nicht ständig sein Browser und wird die unterschiede nie sehen.
Und wenn man die Browser, die es unterstützen sich an schaut dürfte es auf alle funktionieren, die im umgang sind.

Wenn der auftrag geber es wünscht, das es af dem iPhone laufen soll. Dann muss man wohl zu so techniken greifen.

Und klar kommt HTML5 "noch" nicht an Flash ran.

Mit freundlichen Grüßen

Cas