Il doit y avoir un moyen de faire cela. J'ai dessiné une forme avec la toile HTML5 et je voudrais le brouiller. Autant que je sache, il n'y a pas de méthode natale, donc je suppose qu'une bibliothèque JS est nécessaire. Le problème est que la plupart des bibliothèques ne sont que des images floues telles que ce un par exemple. Est-ce possible?
5 Réponses :
L'exemple de bibliothèque pixastic Vous avez établi de fonctionner avec un élément de canvas comme premier argument plutôt qu'une image.
Par défaut, la bibliothèque de pixasastic essaiera de remplacer le nœud que vous transmettez avec l'élément de toile que ça crée. Pour éviter de le faire, vous pouvez inclure une option pour spécifier pour quitter le nœud DOM et inclure un rappel pour gérer vous-même les données renvoyées vous-même. Quelque chose comme ceci: Alternativement, si vous ne souhaitez pas dépendre de une bibliothèque, vous pouvez implémenter un flou lequel vous utilisez getimageData (), de manipuler les données de pixels retournées et En utilisant PuttimageData () pour dessiner l'image floue sur la toile. Une autre chose à noter est que la manipulation individuelle de pixels est lente et peut ne pas bien fonctionner pour de grandes images. Si tel est un problème, vous pouvez essayer de réduire l'image en bas et de remonter pour un effet de flou précisément. Quelque chose comme ceci:
Cool, alors que cela fonctionne à coup sûr, cela ne se comporte pas comme je voudrais. J'ai besoin de bords pour flou beaucoup comme le flou gaussien se comporte. Je pense que cette bibliothèque utilise la méthode Box Blur. Des idées?
J'ai quelque peu négligé votre deuxième méthode. laissez-moi donner cela un coup.
Vous n'auriez pas eu d'exemple en utilisant la méthode getimagedata pratique.
Pour un flou rapide qui est presque gaussien, je recommanderais Stackblur: http://www.quasimondo.com/sttackblurforcanvas/stackblurdemo.html
Alternativement, vous pouvez utiliser ce flou de Superfast Box avec 2 itérations: http://www.quasimondo.com/boxblurcanvas/fastblurdemo.html
Vous pouvez utiliser CSS pour brouiller la toile. Si c'est juste la forme que vous souhaitez brouiller, la forme devra être sur sa propre couche séparée (toile), que vous pouvez créer à la volée.
Exemple: P>
canvas.style.webkitFilter = "blur(0px)";
@David, pour tous sauf Edge et Firefox, oui. Voir cette graphique .
@Mirabilis Edge va bien, mais Firefox moins tellement. Donc, je ne finirais pas cette phrase avec "oui".
https://github.com/nodeca/glur - il implémente le flou gaussien via le filtre IIR. Voir démos.
myContext.filter = 'blur(10px)'; The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects like blurring or gray-scaling. It is similar to the CSS filter property and accepts the same functions. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter it's still experimental but is supported by chrome & firefox atm.
Bonne réponse, c'est la voie du futur.
Essayez celui-ci à la place: pixastic.com/lib/docs/actions/blufast
Ne vous inquiétez pas de l'un ou l'autre de ces liaisons pixastiques, on dirait que le domaine a été repris, celui de la question va à un site de jeu machine à sous, celui du commentaire est un 404