Bessere Bewegungsunschärfe auf der Leinwand

Es war schonvorher gefragt, aber die akzeptierte Lösung funktioniert bei mir nicht (im wahrsten Sinne des Wortes verschwimmt bei mir in der verknüpften Demo nichts), und es ist ein bisschen ein Trick mit zwei Canvas-Elementen.

Momentan verwende ich die Bewegungsunschärfe-Technik des "armen Mannes", bei der das Quellbild immer wieder auf die Leinwand geblendet wird und nach jeder Iteration ein halbtransparentes Rechteck mit der gleichen Farbe wie der Hintergrund darüber abgelegt wird.

Hier ist eine Demo:http://jsfiddle.net/YmABP/

Wie Sie sehen können, funktioniert es gut für die Bildränder, aber die inneren Teile des Bildes verschwimmen überhaupt nicht und es sieht fürchterlich aus, wenn Bilder teilweise transparent sind.

Gibt es eine bessere Technik für Bewegungsunschärfe? Im Idealfall würde ich gerne in der Lage sein, etwas zu tuncontext.drawImage und übergebe einen Opazitätsparameter, aber AFAIK existiert nichts dergleichen. Einige der Bilder werden möglicherweise auf Domains von Drittanbietern gehostet, sodass ich keinen Zugriff auf die einzelnen Pixeldaten habe. Wenn es darauf ankommt, können wir die Bilder auf unseren Server ziehen und dann könnte ich über jedes Pixel iterieren und es als halbtransparentes kleines Rechteck zeichnen, aber das scheint übertrieben.

Kennt jemand eine bessere Bewegungsunschärfelösung, vorzugsweise eine, die ich für entfernte Bilder verwenden kann?

Ich bezweifle, dass dies wichtig ist, aber für meine gegenwärtigen Zwecke bewegen sich die Dinge nur nach oben.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage