html de toile en forme de filtre de flou

vous pouvez utiliser CSS pour brouiller 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 enlever le flou de la toile avec:

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

c'est probablement le moyen le plus rapide (et le plus simple) de brouiller une toile - surtout pour les appareils mobiles.

pour un flou rapide qui est presque gaussien je recommande StackBlur: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

alternativement, vous pouvez utiliser ce Superfast Box Blur avec 2 itérations: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

l'exemple de bibliothèque pixastic auquel vous avez fait référence devrait en fait fonctionner avec un élément canvas comme premier argument plutôt qu'une image.

par défaut, la bibliothèque pixastic tentera de remplacer le noeud que vous passez par l'élément canvas qu'elle crée. Pour l'empêcher de le faire, vous pouvez inclure une option pour spécifier de quitter le noeud DOM et inclure un rappel pour gérer vous-même les données retournées. 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 implémenter un flou vous-même en utilisant getImageData (), en manipulant les données pixel retournées et en utilisant putImageData() pour dessiner l'image floue vers la toile.

une autre chose à noter est que la manipulation de chaque pixel est lente et peut ne pas bien fonctionner pour les grandes images. Si c'est un problème, vous pourriez essayer de réduire l'image vers le bas et de revenir en arrière pour un effet de flou rapide fait. 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);

https://github.com/nodeca/glur - il met en œuvre gaussian blur via IIR filter. Voir les démos.

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

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

c'est encore expérimental mais est supporté par chrome & firefox atm.