Désaturer une image par programmation ?

[Argorate]

Bonjour,

J'aurais besoin d'un peu d'aide, j'ai environ une centaines d'images que j'aimerais pouvoir afficher avec la possibilité quel soit désaturer ou non (ie en noir & blanc, ou non).

D'une part j'ai la flemme de le faire a la main, et d'autres part, cela doublerais le nombre d'image pour le client, ainsi que le poids, ce qui est très bête au final. Donc Existe t-il un moyen de rendre une image couleur en noir & blanc, via un filtre (css) ou une fonction de prog (php ou js)?

Merci.

[php_addict]

cela ne répond pas franchement à ta question mais en php avec la librairie GD:

http://www.google.fr/#sclient=psy&hl=fr&...956a0619ee

[Sephi-Chan]

Tu peux le faire avec Pixastic, qui dispose d'une action desaturate. Bien sûr, ça implique d'inclure cette librairie (je sens que tu vas râler, mais tu peux heureusement inclure uniquement les actions dont tu as besoin dans le paquet).

Après, je ne sais pas si c'est pertinent de faire cette transformation côté client, mieux vaut peut-être créer dès le début une version désaturée de ton image via GD (tu trouveras sans doute d'autres snippets prêts à l'emploi sur le Web) et l'inclure dans tes sprites, quitte à faire charger un peu plus de d'octets à ton utilisateur (qui le gardera en cache, de toute façon).


Sephi-Chan

[Argorate]

Le problème de Pixastic c'est que ça utilise des balise canvas qui sont pas encore homologué de partout, donc je ne pense pas que se soit une bonne solution pour l'instant, sinon j'ai pensé a gd, mais c'est dommage de perdre des ressources serveur a chaque chargement. le but étant de ne pas doublé le poids (même avec un sprite ça fait mal d'avoir tout en double).
Donc je ne sais pas trop
Faut voir si GD est long ou pas pour une tel modif.

[Sephi-Chan]

Pixastic utilise Canvas où c'est supporté, là où ça ne l'est pas (IE 8 et moins), il utilise les filtres.
Générer l'image avec GD à chaque chargement est une très mauvaise idée : c'est effectivement du gaspillage.
Quant au poids chargé par l'utilisateur, je ne vois pas trop le problème tant que ça reste modéré et que c'est mis en cache, mais sur ce côté, c'est à toi de faire ton job en optimisant cette mise en cache.


Sephi-Chan

[Argorate]

Oui, je verrais si j'ai le temps surtout.
Quel filtre il utilise pour IE8-? si c'est si simple, pourquoi ne pas jouer sur ces filtre directement et pour tous les navigateurs?

Sinon pour 10ko de JS, on peut faire :

Code :

$(".photo").pixastic("desaturate");

C'est pratique ^^

j'ai pas testé sous IE7 (je ne l'ai pas là) mais ça me va assez bien. Le seul truc embêtant c'est que ça fait une requête http de plus d'inclure le script

[php_addict]

Le seul truc embêtant c'est que ça fait une requête http de plus d'inclure le script

--> http://www.jeuweb.org/showthread.php?tid=7430

et Sephi-Chan a aussi fait un topic sur ce sujet

[Sephi-Chan]

Oh l'assisté… La page de l'action desaturate contient un lien vers son code source…

Concernant les requêtes HTTP et le poids, tu t'en soucie beaucoup trop… Franchement, même avec des tas de requêtes HTTP, ça marche vite et bien. Tu peux optimiser ça en utilisant des sprites, en créant des packages de tes CSS et de tes scripts (d'ailleurs à ce sujet j'ai posté un script qui permet de faire ça très simplement, d'autant que tu as déjà installé Ruby et Rubygems pour utiliser SCSS).

Pour IE7… Là aussi, tu peux peut-être l'ignorer. Supporter correctement Webkit est plus important.

[Argorate]

Oh l'assisté… La page de l'action desaturate contient un lien vers son code source…

Eu... a pas comprit pourquoi il dit ça là :roll:
J'ai très bien vu le code, puisque je montre un exemple de cmt ça marche et que je dis que c'est très pratique...

Concernant les requêtes HTTP et le poids, tu t'en soucie beaucoup trop… Franchement, même avec des tas de requêtes HTTP, ça marche vite et bien. Tu peux optimiser ça en utilisant des sprites, en créant des packages de tes CSS et de tes scripts (d'ailleurs à ce sujet j'ai posté un script qui permet de faire ça très simplement, d'autant que tu as déjà installé Ruby et Rubygems pour utiliser SCSS).

Possible... j'essaie de réduire au maximum en fait.

Pour IE7… Là aussi, tu peux peut-être l'ignorer. Supporter correctement Webkit est plus important.

IE reste en tête en attendant ^^
Mais de toute façon là n'est pas la question, faut que ça marche partout.

[Sephi-Chan]

Eu... a pas comprit pourquoi il dit ça là :roll:
J'ai très bien vu le code, puisque je montre un exemple de cmt ça marche et que je dis que c'est très pratique...

Je parlais de la question concernant le filtre… La réponse était dans les 30 lignes de codes.

Possible... j'essaie de réduire au maximum en fait.

Pour IE7… Là aussi, tu peux peut-être l'ignorer. Supporter correctement Webkit est plus important.

IE reste en tête en attendant ^^
Mais de toute façon là n'est pas la question, faut que ça marche partout.

IE est en tête quand tu cumules les versions. Mais concrètement IE7 meurt. Et la compatibilité pour Webkit devrait être prioritaire sur la compatibilité IE7, or actuellement ton site n'est pas utilisable sur Webkit (ce qui est plutôt surprenant).

Vouloir la compatibilité partout n'est pas pertinent : tu vas passer du temps à rendre ton site compatible avec un navigateur en train de disparaître… C'est noble de ta part, mais c'est inutile.


Sephi-Chan