Filtre de flou de forme de toile html

Vous pouvez utiliser CSS pour flouer le canevas. Si c'est juste la forme que vous souhaitez flou, la forme devra être sur sa propre couche distincte (toile), que vous pourrez créer à la volée.

Exemple:

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

Vous pouvez déconcerter la toile avec:

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

C'est probablement le moyen le plus rapide (et le plus simple) de brouiller une toile, en particulier 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 Super Blast Box Blur avec 2 itérations: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

L'exemple de bibliothèque pixas auquel vous avez lié devrait effectivement fonctionner avec un élément de volet comme premier argument plutôt qu'une image.

Par défaut, la bibliothèque pixas essayera de remplacer le nœud que vous passez avec l'élément de toile qu'il crée. Pour éviter cela, vous pouvez inclure une option pour spécifier de laisser le nœud DOM et inclure un rappel pour gérer vous-même les données renvoyées. Quelque chose comme ça:

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

Sinon, si vous ne souhaitez pas dépendre d'une bibliothèque, vous pouvez implémenter un flou en utilisant getImageData (), manipuler les données de pixels retournées et utiliser putImageData () pour ramener l'image floue sur le canevas.

Une autre chose à noter est que la manipulation individuelle des pixels est lente et peut ne pas fonctionner correctement pour les images volumineuses. Si c'est un problème, vous risquez d'essayer d'agrandir l'image et de redimensionner la sauvegarde pour un effet défectueux rapide. Quelque chose comme ça:

 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 implémente le flou gaussien via le filtre IIR. Voir les démos.