1

を使用してユーザーが作成した画像を HTML5 サイトに保存する単純な Rails アプリがありますcanvasContext.toDataURL()。サムネイルのリストを表示する index アクションと、画像を表示する各画像の show アクションがあります。

ここでは、バックエンドで完全に怠け者ですdata:image/png;base64,...。元の画像のbase64でエンコードされた文字列と、クライアントでも生成されるサムネイルを保存するだけです。画像は、<img src="data:"/>URI を使用してページに含まれています。

data-現在、これは v9 より前の IE では完全にサポートされていないため、属性を使用して生成された画像の URL を含め、 jQuery を使用してページの読み込み後にソース属性を置き換えるなど、何らかの回避策を実装する必要があります。

data:これにより、 URLを使用してかなり大きな画像を HTML にインライン化するのが適切かどうかという疑問が生じます...

推奨事項やベスト プラクティスはありますか? イメージは最大 500 KiB で、それぞれが 1 回だけ使用されます。画像を含むページは一度作成されると変更されないため、画像を含めてキャッシュ可能である必要があります。サムネイルを含むインデックス ページ (約 60 KiB) はページネーションを使用するため、ページはほとんどキャッシュできません。HTML ページは実稼働環境で収縮または gzip されると想定できます。

4

3 に答える 3

1

ベストプラクティスは次のとおりです。しないでください。

とにかく回避策が必要になります。これにより、基本的な機能が完全に複製されるため、問題が発生する可能性のある別の場所に移動し、テストするケースが増えます。

画像は非常にキャッシュ可能である必要があると言いますが、キャッシュに関する情報を含めることができない方法で画像を送信しています。ただし、別のHTTPリクエストを介して画像を送信するより一般的なアプローチでは、有効期限とmax-ageリクエストを送信して、画像が1年間変更されないことを示すことができます。画像が変更されないことを確信している場合は、最終変更とeタグを設定することもできます（etagを決定するためのロジックも必要ありません。タグとして、「IMMUTABLE」を送信するだけです。 ）そして、チェックもせずに304を送信することで、すべての条件付きGETに応答します（これも、非常に自信がある場合にのみ行います。それ以外の場合は、304の従来のチェックを実装できます）。

画像が1回だけ使用される場合は、画像を作成する何かによって画像を提供し、クエリ内のいくつかの識別機能（実行していることに固有のもの）に基づいて画像を書き込み、ブラウザのストリームに書き込みます。これを独自の場所で実行するために、アプリケーション内でより適切に分離することができます。

gzipを使用しても、ストリームサイズでこれに勝るものはありません。

于 2012-08-13T13:18:51.873 に答える
1

これは良い考えではありません。代わりに、通常の個別の画像リソースを使用します。

インライン画像を使用することで、

  • 静的画像のキャッシュ可能性をすべて破棄します。インライン画像では、HTML ページが変更されるたびに、すべての画像データも再読み込みする必要があります。

  • gzipping/deflating には時間がかかり、最適ではない結果が生成されます (画像データの圧縮がはるかに困難で効率が悪いため)。

  • インターネットの残りの部分は、プリフェッチャー、キャッシング システム、プロキシなど、個別のリソースである HTML ドキュメントと画像を対象としています。

  • その後、ブラウザの互換性がありますが、これは、ご指摘のとおり、古い IE にとってはひどいものです。

于 2012-08-13T13:12:21.157 に答える
0

私のアドバイスは？やらないでください。

実際のファイルは、バックエンド ライブラリを使用するとより簡単に変更できるため、変更しないでください。また、ページで base64 を使用する場合は、HTML5 で簡単に実行できます。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/myimage.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e){
    if(this.status == 200){
        var bb = new WebKitBlobBuilder(); // Or MozBlobBuilder, MSBlobBuilder, etc.
        bb.append(this.response);

        var reader = new FileReader();
        reader.readAsDataURL(bb.getBlob('image/png'));
        reader.onloadend = function(e){
            $("#myimage").attr("src", reader.result);
        };
    }
};

xhr.send();
于 2012-08-13T18:20:01.953 に答える