Bild auf SW reduzieren

[aaronl]

Hallo

Ich stehe momentan vor folgendem Problem und möchte wissen wie ihr das am ehesten lösen würdet.

Ich habe ein Bild im Design das als "<img.." eingebunden ist.
Dieses Bild wird bei gewissen Anlässen per JS ausgetauscht. Alles soweit kein Problem.

Das eigentlich Problem vor dem ich jetzt stehe ist das das Bild Schwarz-Weiß sein soll. Das Bild schon SW hochladen ist keine Option da es auch noch an anderen Stellen gebraucht wird. Zwei Versionen, eine in Farbe die andere in SW, hochladen möchte ich auch nicht.

Die Idee die mir momentan durch den Kopf geht ist die: Als "src" im "img" tag ein eigenes PHP Script mit der Url zum eigentlich Bild als Parameter zu übergeben. Das PHP Script konvertiert das Bild dann in Graustufen.

Sollte jemand eine andere Idee haben nur her damit.

[schman]

was anderes würde mir jetzt auch nicht einfallen, es gibt zwar in css filter: grey oder so aber das unterstützt nur der IE

[Nils Riel]

Wo ist der Unterschied für den Nutzer, ob er das Bild nun konvertiert angezeigt bekommt, oder von dir manuell auf S/W erhält? Die Dateigröße bleibt gleich und du hast die volle Kontrolle.

[aaronl]

Wo ist der Unterschied für den Nutzer, ob er das Bild nun konvertiert angezeigt bekommt, oder von dir manuell auf S/W erhält? Die Dateigröße bleibt gleich und du hast die volle Kontrolle.

Der Unterschied besteht darin das ich das weitgehenst automatisch haben möchte um mir nicht noch mehr Arbeit auf dauer damit zu machen von einem Bild 2 Varianten zu erstellen. Zudem die SW Variante nicht so wichtig ist das die genau meinen Vorstellungen vom Kontrast entsprechen.

[Deena]

Hallo nevermetme!

Ich habe das gleiche Problem wie Du. Ich suche auch nach einer Möglichkeit, Bilder auf einfachem Weg in s/w anzeigen zu lassen ...
Vor ein paar Tagen bin ich über die Erweiterung "grayscaleimagehover" gestolpert. Leider funktioniert es bei mir nicht - die Bilder, die in Graustufen ausgegeben werden sollen, bleiben bunt

Hast Du die Erweiterung mal ausprobiert ?
Würde mich interessieren ob der "grayscaleimagehover" bei jemand anderem funktioniert ...

Liebe Grüße
Deena

[Tim G]

Das kann php:
http://php.net/manual/de/function.imagefilter.php

Img_filter_grayscale

Im template damit ein neues Bild erzeugen und am besten im Ordner system/html speichern und dann ganz normal im src des img tags ausgeben.

Ich habe das mal in verbindung mit dem catalog benutzt für sw zu bunt hover bilder.
Klappt super.


Sent from my iPhone using Tapatalk

[fabian]

Hallo nevermetme!

Ich habe das gleiche Problem wie Du. Ich suche auch nach einer Möglichkeit, Bilder auf einfachem Weg in s/w anzeigen zu lassen ...
Vor ein paar Tagen bin ich über die Erweiterung "grayscaleimagehover" gestolpert. Leider funktioniert es bei mir nicht - die Bilder, die in Graustufen ausgegeben werden sollen, bleiben bunt

Hast Du die Erweiterung mal ausprobiert ?
Würde mich interessieren ob der "grayscaleimagehover" bei jemand anderem funktioniert ...

Liebe Grüße
Deena

Mit welchem Browser hast du die Extension getestet? Im InternetExplorer funktioniert es nämlich nicht, da der momentan noch kein Canvas unterstützt...

[jojojohann]

hi
ich würde auch gerne den gray scale image hover verwenden.
leider funktionierts mit 2.10.2 bei mir nicht. Er zeigt dann lediglich das gleich bild nochmal rechts von dem ursprünglichen.
Ich habe das Bild direkt über CSS angesprochen ...

falls es eine lösung gibt bitte bescheidgeben

[fabian]

hi
ich würde auch gerne den gray scale image hover verwenden.
leider funktionierts mit 2.10.2 bei mir nicht. Er zeigt dann lediglich das gleich bild nochmal rechts von dem ursprünglichen.
Ich habe das Bild direkt über CSS angesprochen ...

falls es eine lösung gibt bitte bescheidgeben

Kann ich mir das irgendwo anschauen, oder hast du evtl. einen JavaScript error bekommen? Um das testen zu können bräuchte ich genauere Info's, normalerweise funktioniert's nämlich in 2.10.2...

[jojojohann]

hi
nochmal kurz zum Verständnis. Muss ich im css das img ansprechen oder img:hover ?

[fabian]

Einfach das img ansprechen, nicht img:hover... der Rest passiert automatisch.

[jojojohann]

ok, dann müsste es eigentlich funktionieren...

über css werden alle img in #right angesprochen, also alle diese kleinen Bilder ... momentan sind es zwei
hier der link: klick

vielleicht siehst du ja an was es liegt ...

[fabian]

hm, bei mir wird folgender JavaScript Error ausgegeben: "SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.".

Ich glaube das hängt damit zusammen das deine Bilder aus "http://st2.duerschinger-architekten.de" kommen, die eigentlich Domain aber "http://www.neu.duerschinger-architekten.de/" ist und das Script wird aus "http://st3.duerschinger-architekten.de/plugins/grayscaleimagehover/grayscalehover.js" eingebunden.

Teste mal bitte ob es funktioniert wenn du im Contao Backend unter "System" > "Einstellungen" > "Backend-Einstellungen" die Felder "Datei-URL", "Skript-URL", "Plugins-URL" leer lässt.
Wenn es dann funktioniert weis ich wo ich ansetzen muss und kann so schnell wie möglich eine neue Version der Extension veröffentlichen.

[jojojohann]

genau daran lag es ... ich hol mir die sub.domains (st1 st2 st3) (wegen pagespeed) aber nicht aus den Backeneinstellungen, sondern durch ein kleines php plugin ...

wenn ich alle Bilder von der gleichen url hole funktioniert es wie du jetzt sehen kannst.

[fabian]

Gut, dann weis ich ja zumindest schonmal woran es liegt. Ich werde mal testen ob das Problem auch besteht wenn man das ganze per Contao konfiguriert, ich nehme aber an dass es dann auch nicht mehr funktioniert.

Wie schnell ich eine neue Version der extension zur Verfügung stellen kann, kann ich leider noch nicht sagen da ich nicht einschätzen kann wie aufwändig die Lösung des Problems wird...

[darki777]

Das kann php:
http://php.net/manual/de/function.imagefilter.php

Img_filter_grayscale

Im template damit ein neues Bild erzeugen und am besten im Ordner system/html speichern und dann ganz normal im src des img tags ausgeben.

Ich habe das mal in verbindung mit dem catalog benutzt für sw zu bunt hover bilder.
Klappt super.

@Tim G
Ich finds echt schade dass du hierbei kein Beispiel geliefert hast, da es so kaum einem etwas bringt, ein einfaches Copy&Paste aus deinem PHP Script wäre nicht ganz so schwierig gewesen

Wie dem auch sei, ich hab hierzu nen eigenes Script / Tutorial geschrieben das man sich hier herunterladen kann: Bildergallery in Schwarz-Weiß mit Mouseover Effekt


@Deena
Ich kann von grayscaleimagehover und ähnlichen Scripten nur abraten, zumindest wenn einem die Performance wichtig ist. Ich hatte mal ein ähnliches Script im Einsatz, allerdings sinkt die Performance mächtig in den Keller sobald es eine vielzahl von Bildern werden die umgewandelt werden müssen, die dabei verwendete Canvas Technologie zickt rum sobald es zuviel des Guten wird, Canvas suckx ab einem gewissen Punkt, zudem grenzt du Browser wie den IE6, IE7 und IE8 damit aus (natürlich könnte jetzt einer sagen dass man hierfür das von Google entwickelte "explorercanvas" verwenden kann, dieses hat aber ebenfalls seine Nachteile). Daher bin ich den PHP-Weg gegangen, ist gleich viel performanter (siehe Link)


Viele Grüße
darki777 aka Pixelmount