問題タブ [data-uri]

たとえば、リンクをたどると：

data:application/octet-stream;base64,SGVsbG8=

ブラウザーは、ハイパーリンク自体で base64 として保持されているデータで構成されるファイルをダウンロードするように求めます。マークアップでデフォルト名を提案する方法はありますか? そうでない場合、JavaScript ソリューションはありますか?

私はgreasemonkeyのユーザースクリプトのソースを調べていて、cssで次のことに気づきました。

私は、greasemonkeyスクリプトが、サーバー上でホストするのではなく、ソース内で可能なものをすべてバンドルしたいと考えていることを理解できます。これは十分に明白です。しかし、私は以前にこのテクニックを見たことがなかったので、その使用を検討しました。それはいくつかの理由で魅力的だと思われます。

1. ページ読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます
2. CDNがない場合は、画像と一緒に送信されるCookieによって生成されるトラフィックの量が減少します
3. CSSファイルをキャッシュできます
4. CSSファイルはGZIPPEDにすることができます

IE6（たとえば）が背景画像のキャッシュに問題があることを考えると、これは最悪の考えではないようです...

それで、これは良い習慣ですか、悪い習慣ですか、なぜそれを使用しないのですか、そして画像をbase64エンコードするためにどのツールを使用しますか？

更新-テストの結果

• 画像を使用したテスト：http：//fragged.org/dev/map-shot.jpg-133.6Kb

• テストURL： http: //fragged.org/dev/base64.html

• 専用CSSファイル： http： //fragged.org/dev/base64.css-178.1Kb

• GZIPエンコーディングサーバー側

• クライアントに送信された結果のサイズ（YSLOWコンポーネントテスト）：59.3Kb

• クライアントブラウザに送信されたデータの保存：74.3Kb

いいですが、小さい画像には少し役に立たないと思います。

更新：PageSpeedに取り組んでいるGoogleのソフトウェアエンジニアであるBryan McQuadeは、ChromeDevSummit 2013で、CSSのdata：urisは、講演中に重要/最小限のCSSを配信するためのレンダリングブロックアンチパターンと見なされると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit /sessionsを参照し、それを覚えておいてください-実際のスライド

誰でもブラウザからアクセスできる、完全に JavaScript ベースの zip/unzip ユーティリティを作成するというアイデアで遊んでいます。zip をブラウザに直接ドラッグするだけで、その中のすべてのファイルをダウンロードできます。また、個々のファイルをドラッグして新しい zip ファイルを作成することもできます。

サーバーサイドでやったほうがいいのはわかっていますが、このプロジェクトはちょっとした楽しみのためのものです。

利用可能なさまざまな方法を利用すれば、ファイルをブラウザーにドラッグするのは簡単なはずです。(Gmail スタイル)

エンコード/デコードは問題ないはずです。私はいくつかの as3 zip ライブラリを見てきましたので、それで問題ないと確信しています。

私の問題は、最後にファイルをダウンロードすることです。

これは Firefox では正常に機能しますが、Chrome では機能しません。

を使用してクロムに画像としてファイルを埋め込むことができます<img src="data:jpg/image;ba.." />が、ファイルは必ずしも画像ではありません。それらは任意の形式である可能性があります。

誰かが別の解決策または何らかの回避策を考えられますか?

Canvas で画像を開くにはどうすればよいですか? エンコードされた

私は使用しています

出力は、エンコードされた Base 64 イメージです。この画像をキャンバスに描画するにはどうすればよいですか?

strDataURI を使用してイメージを作成したいですか? 可能ですか？
そうでない場合、キャンバスに画像をロードするための解決策は何でしょうか?

次の（壊れやすい）JavaScriptコードについて考えてみます。

質問）

• 画像の幅と高さはすぐに修正する必要がありますか？
• キャンバスの描画はすぐに機能する必要がありますか？
• onloadコールバック（srcが変更された後に設定）を呼び出す必要がありますか？

実験的テスト同様のコードを使用して簡単なテストページ
を作成しました。Safariでの最初のテストでは、HTMLページをローカルで開いて（url）、サーバーからロードすることで、すべてが機能していることを示しました。高さと幅が正しく、キャンバスの描画が機能し、起動します。file:///onload

Firefox v3.6（OS X）では、ブラウザの起動後にページをロードすると、設定直後に高さ/幅が正しくないことが示され、drawImage()失敗します。（ただし、ハンドラーは起動します。）ただし、ページを再度ロードすると、設定して作業したonload直後に幅/高さが正しいことが示されます。drawImage()FirefoxはデータURLの内容を画像としてキャッシュし、同じセッションで使用するとすぐに利用できるように見えます。

Chrome v8（OS X）では、Firefoxと同じ結果が表示されます。画像はすぐには利用できませんが、データURLから非同期で「ロード」するのに時間がかかります。

上記のブラウザが機能するか機能しないかを実験的に証明することに加えて、これがどのように動作するかについての仕様へのリンクが本当に欲しいです。これまでのところ、私のGoogle-fuはその任務を果たしていません。

安全にプレイ
する上記が危険である理由がわからない場合は、安全のために次のような画像を使用する必要があることを知っておいてください。

base64文字列を使用して画像を表示するためのあらゆる方法を試しました。しかし、それらのどれも機能していません。IE6,7、Firefox3でテストしました。以下のコードの何が問題になっているのか教えてください。

ウィキペディアでこれを読みました：

データ URI は、含まれるドキュメント (CSS または HTML ファイルなど) とは別にキャッシュされないため、含まれるドキュメントが再ダウンロードされるたびにデータがダウンロードされます。

これは、ページが更新されるたびに、またはユーザーがナビゲーション リンクをクリックするたびにコードがダウンロードされるということですか? data-uri をキャッシュするにはどうすればよいですか?

ps - 私は 20 個ほどの小さな png ファイルについて話しているだけです (ほとんどがシルクのアイコンですが、2 * 16KB のファイルも同様です)。

画像のデータ URIを使用する信頼できる方法は何ですか? 私は IE6/7 がそれらをサポートしていないことを知っています。

1. デフォルトで画像のデータ URI を使用します
2. ブラウザがIE6/7の場合、javascriptを使用して画像（データではなく実際の画像）を表示します
3. に画像を (データとしてではなく) 含めます<noscript>。

私の質問は:<noscript>ブラウザが JavaScript とデータ URI をサポートしている場合でも、画像は取得されますか?

JavaScript を介してデータ URL を使用するように画像を設定しようとすると(この質問から)、IE8 では機能しないようです。

その最初のリンクのページには: <img id="foo" src="alphaball.png">
25 行目で、この JavaScript コードが実行されます:document.getElementById('foo').src = img_src;

他のすべてのブラウザー (IE9b を含む) では、画像がアルファボールから私の頭の写真に正常に変更されます。IE8 では、アルファボールがごく短時間表示された後、欠落した画像アイコンに置き換えられます。

これは既知の問題ですか? IE8 と JavaScript でデータ URL を使用するための回避策はありますか?

AndroidおよびiPhoneデバイスで使用するモバイルWebアプリケーションを作成しました。テスト後、すべてが完全に機能することに満足していたため、少し最適化してみることにしました。

すべての画像が小さい16x16pxpng画像であるため、cssファイルでデータURIを使用することにしました。

WiFi経由でインターネットに接続されたiPhoneでテストしている間、画像は正常に読み込まれますが、モバイルデータ接続を使用して接続している場合、画像は読み込まれません。

Apacheエラーログを見ると、WiFiを使用しているにもかかわらず、何らかの理由で画像がファイルとして要求されている（そして見つからない）ことがわかります...

私が使用しているCSSは次のとおりです...

私は、cssの速記を使用しない/ cssの速記を使用する、さまざまなmimeタイプを使用する、Google Minifyを使用しないなど、できる限りのことを試しましたが、まったく役に立ちませんでした。しかし、これはまだすべてがWiFi上で完全に機能する理由を説明していません。

Androidデバイスは、Firefox、Chrome、デスクトップバージョンのSafariと同様に完全に機能します。また、実際のP​​NG画像ファイルをロードする場合（データURIを使用して画像を埋め込むのではなく）、画像は正常にロードされます。

誰かがこれに光を当てることができれば、私は永遠に感謝します、私が解決できるほとんどのことですが、これは私を完全に困惑させます！