Arthur Hoaro's Links 07/05/2015 What the... On peut faire des trucs de fous sur les images juste avec du CSS : flou, contraste, saturation, luminosité, inversion de couleur, etc.
Je suis bluffé.
(
Permalink)
A flood of Stgfop 07/05/2015 Exemple d'effets css avec la propriété filter
(
Permalink)
le hollandais volant > Arthur Hoaro's Links 07/05/2015 Oh, classe !
Et avec les images/js, il est possible de sauver le travail effectué. Ça ferait donc un mini éditeur de photo dans le navigateur.
Je vais peut-être ajouter ça à mes outils en ligne, ajouter un manifest et comme ça ce sera directement compatible avec Firefox OS.
Je me note ça.
— (
permalink)
le hollandais volant 08/05/2015 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)
— (
permalink)
stuper 08/05/2015 Sympa ces effets !
(
Permalink)