Bessere Bewegungsunschärfe der Leinwand

Es wurde ​​vorher angefragt , aber die akzeptierte Lösung funktioniert nicht. t Arbeit für mich (buchstäblich, ist nichts verwischt für mich in der verknüpften Demo), und es ist ein bisschen ein Kludiss mit zwei canvas Elemente.

Ich verwende derzeit die Bewegungsunschärfe-Technik des "armen Mannes", bei der das Quellbild immer wieder auf die Leinwand geblitzt wird und nach jeder Iteration ein halbtransparentes Rechteck in die gleiche Farbe wie der dahinter liegende Hintergrund fällt.

Hier ist eine Demo: Ссылка

Wie Sie sehen, funktioniert es gut für die Kanten des Bildes, aber die inneren Teile des Bildes werden nicht verwischt und es sieht schrecklich aus mit Bildern, die teilweise Transparenz haben.

Gibt es eine bessere Technik für Bewegungsunschärfe? Im Idealfall würde ich gerne etwas wie context.drawImage machen und einen Opazitäts-Parameter übergeben können, aber AFAIK existiert nicht. 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 erscheint als Overkill.

Kennt jemand eine bessere Bewegungsunschärfe-Lösung, vorzugsweise eine, die ich mit Remote-Bildern verwenden kann?

Ich bezweifle, dass das wichtig ist, aber für meine gegenwärtigen Zwecke bewegen sich die Dinge nur aufwärts.