Web上で画像を表示する
Web は標準をサポートしていますImage画像を表示するウィジェット。
ただし、Web ブラウザは信頼できないコードを安全に実行できるように構築されているため、
比較した画像でできることには一定の制限があります
モバイルとデスクトップのプラットフォームに。このページではこれらの制限について説明します
そしてそれらを回避する方法を提供します。
バックグラウンド
このセクションでは、利用可能なテクノロジーを要約します Flutter と Web 全体で、 以下のソリューションはこれに基づいています。
Flutter の画像
Flutter が提供するのは、Imageウィジェットと低レベルdart:ui/Image画像をレンダリングするためのクラス。
のImageウィジェットには、ほとんどのユースケースに十分な機能が備わっています。
のdart:ui/Imageクラスはで使用できます
きめ細かい制御が必要な高度な状況
画像のものが必要です。
ウェブ上の画像
Web では、画像を表示するためのいくつかの方法が提供されています。 以下に一般的なもののいくつかを示します。
- 内蔵されている
<img>と<picture>HTML要素。 - の
drawImageのメソッド<canvas>エレメント。 - WebGL キャンバスにレンダリングするカスタム画像コーデック。
各オプションには独自の利点と欠点があります。
たとえば、組み込み要素は次の要素にうまく適合します。
他の HTML 要素は自動的に取得されます。
ブラウザのキャッシュと組み込み画像の利点
最適化とメモリ管理。
任意のソースからの画像を安全に表示できます。
(詳細については、以下の CORS セクションを参照してください)。drawImage画像を範囲内に収める必要がある場合に最適です
を使用してレンダリングされる他のコンテンツ<canvas>エレメント。
また、画像のサイズを制御することもできます。
CORS ポリシーで許可されている場合は、ピクセルを読み取ります
さらに処理するために画像を元に戻します。
最後に、WebGL は最高レベルの機能を提供します。
画像のコントロール。ピクセルを読み取るだけでなく、
カスタム画像アルゴリズムを適用しますが、GLSL を使用することもできます。
ハードウェアアクセラレーション。
クロスオリジンリソース共有 (CORS)
コルスブラウザが制御するために使用するメカニズムです
あるサイトが別のサイトのリソースにアクセスする方法。
デフォルトでは、1 つの Web サイトが存在するように設計されています。
別のサイトへの HTTP リクエストを行うことは許可されていません
使用してXHRまたfetch。
これにより、別のサイトのスクリプトが代わりに動作するのを防ぎます。
ユーザーの、そして他のユーザーへのアクセスの取得から
サイトのリソースを許可なく使用することはできません。
使用するとき<img>、<picture>、 また<canvas>、
ブラウザはピクセルへのアクセスを自動的にブロックします
画像が別のサイトからのものであることがわかったとき
CORS ポリシーはデータへのアクセスを禁止します。
WebGL では、画像データにアクセスする必要があります。 画像をレンダリングできるようになります。したがって、 WebGL を使用してレンダリングされる画像はサーバーからのみ取得する必要があります CORS ポリシーが動作するように構成されているもの アプリケーションにサービスを提供するドメイン。
Web 上の Flutter レンダラー
Flutter は、Web 上で次の 2 つのレンダラーの選択肢を提供します。
-
HTML: このレンダラーは HTML の組み合わせを使用します。
UI をレンダリングするための CSS、Canvas 2D、および SVG。
それは、
<img>画像をレンダリングする要素。 - キャンバスキット: このレンダラーは WebGL を使用して UI をレンダリングします。 したがって、必要です 画像のピクセルにアクセスします。
HTML レンダラーは<img>画像を表示できる要素
任意のソース。しかし、
これにより、実行する内容に次の制限が課されます。
それらを使ってできること:
- 限定的なサポート
Image.toByteData。 - サポートなし
OffsetLayer.toImageとScene.toImage。 - アニメーション画像のフレームデータにはアクセスできません
(
Codec.getNextFrame、frameCountは常に 1、repetitionCountは常に 0)。 - サポートなし
ImageShader。 - 画像に適用できるシェーダー効果の限定的なサポート。
- 画像メモリを制御できません (
Image.dispose効果はありません）。 メモリはブラウザーによってバックグラウンドで管理されます。
CanvasKit レンダラは、Flutter の画像 API を完全に実装します。 ただし、そのためには画像ピクセルにアクセスする必要があります。 したがって、CORS ポリシーの対象となります。
ソリューション
インメモリ、アセット、および同一オリジンのネットワーク イメージ
アプリのメモリ内にエンコードされた画像のバイトがある場合、
として提供される資産、またはに保存されています。
アプリケーションにサービスを提供するのと同じサーバー
（としても知られている同起源）、特別な努力は必要ありません。
画像は次を使用して表示できますImage.memory、Image.asset、 とImage.networkHTML モードと CanvasKit モードの両方で。
クロスオリジン画像
HTML レンダラーはクロスオリジン画像をロードできます 追加の設定なしで。
CanvasKit では、アプリがエンコードされた画像のバイトを取得する必要があります。 これを行うにはいくつかの方法がありますが、これについては以下で説明します。
CORS 対応の CDN でイメージをホストします。
通常、コンテンツ配信ネットワーク (CDN)
どのドメインをカスタマイズするかを構成できます
あなたのコンテンツへのアクセスが許可されています。
たとえば、Firebase サイト ホスティングでは、カスタムの指定 Access-Control-Allow-Originのヘッダーfirebase.jsonファイル。
画像サーバーの制御が不足していませんか? CORS プロキシを使用します。
CORS を許可するように画像サーバーを構成できない場合 アプリケーションからのリクエスト、 プロキシを使用することで画像をロードできる可能性があります リクエストは別のサーバー経由で行われます。これには、 中間サーバーにはイメージをロードするための十分なアクセス権があります。
この方法は、元の 画像サーバーは画像を公的に提供し、 しかし、正しい CORS ヘッダーが設定されていません。
例:
- 使用するCloudFlare ワーカー。
- 使用するFirebaseの機能。
使用<img>プラットフォームビューで。
Flutter は、次の方法を使用してアプリ内に HTML を埋め込むことをサポートしています。HtmlElementView。それを使用して、<img>要素を使用して、別のドメインから画像をレンダリングします。
ただし、これには次のものが付属していることに注意してください。
このセクションで説明されている制限事項
上記の「Web 上の Flutter レンダラー」。
今日現在、使用する HTML 要素が多すぎます
CanvasKit レンダラーを使用すると、パフォーマンスが低下する可能性があります。
画像が画像以外のコンテンツをインターリーブする場合、Flutter は次のようにする必要があります。
間に追加の WebGL コンテキストを作成します。<img>要素。
アプリケーションで大量の画像を表示する必要がある場合
同じ画面上で一度に表示するには、使用を検討してください。
CanvasKit の代わりに HTML レンダラー。