Mejor desenfoque de movimiento del lienzo

Question

Ha sido preguntado antes, pero la solución aceptada no me funciona (literalmente, nada se me vuelve borroso en la demostración vinculada), y es un poco complicado que involucra dos elementos del lienzo.

Actualmente estoy usando la técnica de desenfoque de movimiento del "pobre", que básicamente implica borrar la imagen de origen en el lienzo una y otra vez y colocar un rectángulo semitransparente del mismo color que el fondo en la parte superior después de cada iteración.

Aquí hay una demostración: http://jsfiddle.net/YmABP/

Como puede ver, funciona muy bien para los bordes de la imagen, pero las partes internas de la imagen no terminan borrosas en absoluto y se ve terrible con imágenes que tienen transparencia parcial.

¿Existe una técnica mejor para el desenfoque de movimiento?Idealmente, me gustaría poder hacer algo como context.drawImage y pase un parámetro de opacidad, pero AFAIK no existe nada parecido.Algunas de las imágenes pueden estar alojadas en dominios de terceros, por lo que no tendré acceso a los datos de píxeles individuales.Si llega el momento, podemos colocar las imágenes en nuestro servidor y luego podría iterar sobre cada píxel y dibujarlo como un pequeño rectángulo semitransparente, pero esto parece excesivo.

¿Alguien conoce una mejor solución de desenfoque de movimiento, preferiblemente una que pueda usar con imágenes remotas?

Dudo que esto importe, pero para mis propósitos actuales, las cosas sólo avanzan hacia arriba.

Answer 1

Simplemente configure el globalAlpha propiedad del contexto Antes de dibujar su imagen repetidamente:

Demo: 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

¿Lo ha intentado easeljs y su blurfilter - intente cambiar / animar la borrosa en una dirección (x o y).