Meilleure toile de flou de mouvement

Question

Il a été demandé avant, mais la solution retenue ne fonctionne pas pour moi (littéralement, rien n'est flou pour moi dans la démo), et c'est un peu une bidouille impliquant toile de deux éléments.

Je suis actuellement en utilisant le "pauvre homme" flou de mouvement la technique, qui consiste essentiellement à blitting la source de l'image de la toile et la suppression d'une semi-transparente rectangle de la même couleur que le fond sur le dessus après chaque itération.

Voici une démo: http://jsfiddle.net/YmABP/

Comme vous pouvez le voir, il fonctionne très bien pour les bords de l'image, mais la partie à l'intérieur de l'image, de ne pas flou du tout, et ça a l'air terrible avec des images qui ont une transparence partielle.

Est-il mieux de la technique du flou de mouvement?Idéalement, je voudrais être en mesure de faire quelque chose comme context.drawImage et de passer un paramètre d'opacité, mais autant que je sache, rien de tout cela n'existe.Certaines images peuvent être hébergés sur des domaines tiers, de sorte que je n'aurai pas accès à l'individu de données de pixel.Si il descend à lui, nous pouvons récupérer les images sur notre serveur et ensuite, j'ai pu effectuer une itération sur chaque pixel et le dessiner comme un semi-transparente minuscule rectangle, mais cela semble exagéré.

Personne ne sait de mieux le flou de mouvement de la solution, de préférence celui que je peux l'utiliser à distance les images?

Je doute que cela les choses, mais pour mes fins, les choses ne se déplacer vers le haut.

Answer 1

Il suffit de régler le globalAlpha propriété du contexte avant de dessiner votre image à plusieurs reprises:

Démo: http://jsfiddle.net/qfEUt/

var img = new Image,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​

Answer 2

Avez-vous essayé EaselJS et son BlurFilter - essayez de changer/animation de flou dans une direction (x ou y).