ユーザーが背景画像をアップロードします。これらのイメージは、Amazon S3 の CDN に保存されます (同じサーバー上ではありません)。
現在、私がバックグラウンドを行う方法はこれです。
<div id="background"></div>
位置は固定で、javascript を使用して背景画像を設定します。
クライアント側でこの背景をぼかしたいと思います。これどうやってするの?
Blur.js は、Amazon CDN の画像では機能しません。
ユーザーが背景画像をアップロードします。これらのイメージは、Amazon S3 の CDN に保存されます (同じサーバー上ではありません)。
現在、私がバックグラウンドを行う方法はこれです。
<div id="background"></div>
位置は固定で、javascript を使用して背景画像を設定します。
クライアント側でこの背景をぼかしたいと思います。これどうやってするの?
Blur.js は、Amazon CDN の画像では機能しません。
現在、style.filter を使用できます。以下の例を参照してください。
var element = document.getElementById("background");
element.style.filter = "blur(0px)";
Chrome バージョン 86.0.4240.198 (公式ビルド) (x86_64) でテストされ、動作します。
いつでも Pixastic ライブラリを試すことができます (HTML5 機能の使用を気にしない限り):
css フィルターを使用してこれを行うことができますが、これは非常に新しいブラウザーでのみ可能です。それと SVG フィルターの組み合わせにより、いくつかのブラウザーが得られます。その後、canvas にフォールバックし、excanvas でほぼすべてのブラウザーを取得できると思います。
本当に、私はフィルターを使用するだけで、1年かそこらでほとんどのユーザーがフィルターを使用するようになります.