html de toile en forme de filtre de flou

Il doit y avoir une façon de le faire. J'ai dessiné une forme avec du html5 canvas et je voudrais flou. Autant que je sache, il n'existe pas de méthode native, donc je suppose une bibliothèque js est nécessaire. Le problème est la plupart des bibliothèques de flou des images comme cette par exemple. Est-ce possible?

Essayez ceci à la place: pixastic.com/lib/docs/actions/blurfast

OriginalL'auteur Justin Bull | 2010-08-12

  1. 11

    vous pouvez utiliser CSS pour le flou de la toile. Si c'est juste la forme que vous voulez flou puis la forme devra être sur son propre calque distinct (toile), que vous pouvez créer à la volée.

    Exemple:

    canvas.style.webkitFilter = "blur(3px)";

    Vous pouvez l'onu-le flou de la toile de nouveau avec:

    canvas.style.webkitFilter = "blur(0px)";

    C'est probablement la manière la plus rapide (et plus simple) de façon à brouiller une toile en particulier pour les appareils mobiles.

    webkitFilter, qui fonctionnent sur tous les navigateurs?
    pour tous, mais Edge et Firefox, oui. Voir ce tableau.
    Edge est bien, mais Firefox est moins. Donc je ne serait pas la fin de cette phrase avec "oui".

    OriginalL'auteur Jarrod

  2. 5

    Pour un rapide flou qui est presque Gaussienne je le recommande StackBlur:
    http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

    Vous pouvez également utiliser cette Superfast Zone de Flou avec 2 itérations:
    http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

    OriginalL'auteur Quasimondo

  3. 2

    La pixastic exemple de bibliothèque que vous avez lié à devrait vraiment travailler avec un élément canvas comme premier argument plutôt que d'une image.

    Par défaut, le pixastic bibliothèque va essayer de remplacer le nœud que vous transmettez avec l'élément canvas qu'il crée. Pour l'empêcher de faire de sorte que vous pouvez inclure une option pour spécifier à quitter le nœud DOM et comprennent un callback pour gérer les données renvoyées vous-même. Quelque chose comme ceci:

    Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) {
    canvas.getContext('2d').drawImage(img, 0, 0);
});

    Alternativement, si vous ne voulez pas dépendre d'une bibliothèque, vous pouvez appliquer un effet de flou à l'aide getImageData(), la manipulation de l'retourné données de pixels et à l'aide de putImageData() pour tracer l'image floue de retour sur la toile.

    Une autre chose à noter est que l'individu manipulation de pixels est lent et peut ne pas bien fonctionner pour les images de grande taille. Si c'est un problème, vous pouvez essayer de mettre à l'échelle l'image vers le bas et de mise à l'échelle de retour pour une vite fait flou comme l'effet. Quelque chose comme ceci:

    ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2, 0, 0, canvas.width, canvas.height);
    cool, alors que cela fonctionne pour vous, il ne se comporte pas comme je l'aimerais. J'ai besoin de bords de flou un peu comme flou gaussien se comporte. Je pense que cette bibliothèque utilise la zone de flou méthode. Des idées?
    j'ai quelque peu oublié votre deuxième méthode. permettez-moi de donner un coup de feu.
    ne vous arrive pas d'avoir un exemple d'utilisation de la getImageData méthode pratique feriez-vous?

    OriginalL'auteur Kyle Jones

  4. 2
    myContext.filter = 'blur(10px)';

    La CanvasRenderingContext2D.filtre propriété de la Toile API 2D fournit des filtres d'effets comme le flou ou gris-mise à l'échelle. Il est similaire à la CSS propriété de filtre et accepte les mêmes fonctions. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

    il est encore au stade expérimental, mais est pris en charge par chrome & firefox atm.

    Bonne réponse, c'est la voie de l'avenir.

    OriginalL'auteur junvar

  5. 1

    https://github.com/nodeca/glur - il implémente flou gaussien via filtre IIR. Voir les démos.

    OriginalL'auteur Vitaly