Je suis un développeur flash et je travaille sur un port JavaScript d'un jeu. Dans la version flash, j'utilise des filtres à matrice de lueur, de flou et de couleur de couleur pour manipuler les apparitions d'objets d'affichage. Je voudrais faire la même chose avec ma vue JavaScript. Certains d'entre eux sont des embellissements, tandis que d'autres sont utilisés pour produire soigneusement le résultat souhaité. Étant donné que les objectifs de ce projet sont de créer un port exact, je me demande quelles options je dois appliquer des filtres à des données sur toile brute, à des étiquettes SVG en ligne ou à des éléments DOM en ligne.
J'ai considéré pixastic, mais mon collaborateur insiste sur une licence GPL pour le moment, ce qui signifie que toute technologie que j'utilise doit être compatible GPL. Pixastic utilise la licence publique de Mozilla, donc je ne peux donc pas l'utiliser. (Qui est une énorme bummer, laissez-moi vous dire.)
Je vais le répéter de manière concise: comment appliquer efficacement des filtres pixels sur des éléments DOM, des données d'image en toile ou des balises SVG avec JavaScript?
4 Réponses :
Voici un exemple montrant un filtrage SVG:
et la version en toile correspondante:
Voici quelques bibliothèques JS pour la toile faisant ce que je pense que vous recherchez:
Un certain nombre d'exemples de filtres SVG peuvent être trouvés sur http://svg-wow.org (licence CC0 sous licence ).
Voici une Demo Nifty Stackblur, Quasimondo.com/stackblurforcanvas/stackblurdemo.html .
Quasimondo's l'homme, n'est-ce pas? Je pense que je vais utiliser ce stackblur, si mon ami Heureux GPL ne voit aucune raison de ne pas le faire. Bitmapdata.js a l'air très efficace pour d'autres opérations, bien que je ne sache pas avec certitude que je l'essaie.
J'ai créé une bibliothèque ( context-blender ) pour effectuer des effets de mélange de style photoshop entre Toiles HTML. Ce n'est pas exactement ce dont vous avez besoin, comme vous voulez que certains filtres de convolution s'exécutent sur les pixels autres que l'original, mais le chemin du code sera le même: Ma bibliothèque se trouve être une licence MIT, alors n'hésitez pas à enquêter sans crainte de problèmes. getimagedata () , munge les données, < Code> PuttimageData .
Library.js Bibliothèque pour traitement d'image (y compris de nombreux types de filtres AS3, comme la convolution, la colormertrix, la carte de déplacement, etc.)
https://github.com/foo123/filter.js
ps je suis l'auteur
Le meilleur moyen de filtrer des images dans JavaScript passe par un cadre de traitement d'image. Quelques options javascript pures:
dans le cas de Marvinj , utilisez le code suivant pour charger votre image: Je vais utiliser l'image d'entrée suivante pour démontrer des filtres: p> grisallescale: strong> p> 
p> 
p> 
p>
A> p>
Avez-vous demandé à l'auteur de changer la licence ou la double licence pixastic? Je me demande s'il a une raison particulière d'utiliser MPL au lieu de BSD ou d'une autre alternative populaire ...