#12358

CSS Filter Effects — CSSReflex - Arthur Hoaro's Links - Le Hollandais Volant

lol : je l’ai fait \o/

Mais je suis déçu : ça ne marche que dans Firefox :p
Le problème, c’est que quand on ajoute un effet CSS sur une image (le filter), il n’est pas possible de récupérer l’image altérée en JS. On peut juste récupérer l’image d’origine.

Si on ajoute un effet sur une image, et qu’on fait "clic droit > sauver" on obtient l’image d’origine. Normal : Firefox traite le dom en JS aussi.


Deux solutions :
– utiliser une lib (lourde) pour prendre une capture d’écran de la page et découper l’image altérée.
– utiliser Canvas et les filtres internes de Canvas.

J’ai choisis la seconde solution, même si ça limite l’outil à Firefox.
L’avantage, c’est qu’il me semble que le moteur graphique CSS et de Canvas est le même. J’applique donc les filtres en CSS pour faire une preview, puis, quand l’utilisateur est content du résultat, il clique sur "sauver" et j’applique les filtres identiques dans le canvas.

Je pourrais tout faire en Canvas, mais dans ce cas rien ne fonctionnerait dans Chrome ou nul part ailleurs.


Démo : http://lehollandaisvolant.net/tout/tools/toshop/ (alpha, version pas encore terminé qui ne fait que reprendre le code du lien d’origine et tout appliquer sur la même image)
http://lehollandaisvolant.net/?mode=links&id=20150507190338