Bilder mit JS verändern?

[Benzol]

Hey meine Lieben, frohes Neues und so

Mich würde interessieren, ob es möglich ist Bilder mit JavaScript so zu verändern, das man z.B. ein Farbbild in Schwarz/Weiß oder Sepia umwandeln kann.
Ist sowas möglich oder sollte ich da doch lieber mit PHP arbeiten und dann die Bilder per JavaScript austauschen?

 

[Quaese]

Hi,

für den IE gibt es die CSS-Eigenschaft filter mit der Option BasicImage und dem Attribut greyScale, wodurch ein Bild als Graustufenbild angezeigt werden kann.

<img onclick="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);'" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=0);" src="bild.jpg" width="120" height="120" alt="">

Viele andere moderne Browser unterstützen das HTML5-Element canvas, mit dessen Hilfe ein eigener Graufilter entwickelt werden kann - Beispiel.

Ciao
Quaese

 

[Benzol]

Also eine reine IE Lösung fällt weg... rein für diesen Browser zu entwickeln ist ein frevel Unterstützt denn der 7er dieses Canvas-Element? Ich denke, FF, Safari und Opera werden das drinne haben.

 

[Quaese]

Hi,

der IE7 unterstützt derzeit das canvas-Element noch nicht, aber du könntest ja zweigleisig fahren.

Das canvas-Element bietet ähnlich dem iframe-Element die Möglichkeit, darin Inhalte für Browser zu definieren, die die Unterstützung noch nicht implementiert haben. Hier könntest du für den IE also ein Bild-Objekt anzeigen lassen und manipulieren.

Einschänkend für moderne Browser gilt neben der Unterstützung des canvas-Elements, dass die benötigten Methoden getImageData und putImageData implementiert sein müssen. Hier fallen leider einige Browser aus.

Ich habe dir hier ein Beispiel zusätzlich einer Liste der getesteten Browser umgesetzt.

Sollte jemand Ergänzungen für die Liste haben, bitte ich diese hier zu posten - danke!

Ciao
Quaese

 

[Maik]

Ich habe dir hier ein Beispiel zusätzlich einer Liste der getesteten Browser umgesetzt.

Hallo Markus,

check mal bitte den angegebenen URL: "http://127.0.0.1/Eigene/Test/tutorials.de/graufilter/index.html"

lg Maik

 

[Quaese]

@Maik: Der Link funktionierte bei mir völlig problemlos ;-)

... danke für den Hinweis, ist geändert.

Quaese

 

[Benzol]

Hmm, das sieht von der Sache her schon super aus. Gibt aber scheinbar noch eine ganze Wenn-und-aber. Vllt. Sollte ich die Arbeit von einem PHP Script erledigen lassen und dann per JavaScript austauschen. Das sollte das in nahezu allen Browsern gehen.