を介してコンテンツを生成しているときに、Javascript エラーがページのハンドラーdata:URIによって「スクリプト エラー」として報告されることに気付きました。window.onerrorただし、Firefox のエラー コンソールには正確なエラーが一覧表示されます。

例えば：

実行すると、ポップアップ ウィンドウに「スクリプト エラー」が表示されますが、Firefox のエラー コンソールには「未終了の文字列リテラル」と表示されます。

経由で正確なエラーを報告する方法はありwindow.onerrorますか?

これは社内でのデバッグ用であるため、ブラウザー間の互換性は必須ではありません。

ありがとう！

キャンバスをbase64文字列として表しています。サーバーがデータを使用して PDF ドキュメントを作成できるように、この文字列をサーバーに渡したいと思います。

データをサーバーに渡そうとすると、「リソースの読み込みに失敗しました: サーバーは 414 (Request-URI Too Long) のステータスで応答しました」という 414 エラーを受け取ります。

クライアント側でイメージを正常にダウンロードしました。実際に画像を取得してダウンロードするのに問題はありませんが、それが表現されるファイルの種類を整形するだけです。

出力を小さなチャンクに分割し、各チャンクをサーバーに送信し、サーバーにこれらのチャンクを再構築させ、pdf を作成し、そのファイル ストリームをクライアントに送信してダウンロードをトリガーする適切なソリューションはありますか?

参考までに -- データ URL は最大 105,000 文字です。

赤い点のデータ URI:

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' height='32' width='32' alt='Image'>

あるとすれば、ここにはどのような部品がありますか? たとえば、最初の 20 文字はタイプ用に予約されており、次の 2 文字は不透明度用に予約されていますか? 誰かが私を正しい場所に向けることができれば、私はインターグーグルで何も見つけることができません!

PNG の場合、文字列に類似点があります。 iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAh7sky7OeYKB8+tP6XGdtx//a/E2m63tavY/hRM=qW+lVt1OD8sxrieE5j7ebvK3eiz+1==eV=Crr4=

と

iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC

最初の 20 ～ 30 は似ていますが、わずかな違いがあります。 iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPA

しかし、フォーマット/パターンを特定できません。使用する=か/、RFC を調べますが、これはまだ開いています...

公共の Wi-Fi アクセス ポイント用のスプラッシュ ページを設計していますが、Firefox はカスタム フォントの表示を拒否しますが、他のすべてのブラウザー (IE < 9 ではありませんが、それは予想されていました) で動作します。

ページは次の制約で機能する必要があります。

• インターネットへのアクセスなし : このページは、ユーザーが利用規約に同意する前に表示されるため、すべてがブロックされます
• ページはアクセス ポイントに保存されます。これは、おそらく C で記述された組み込みサーバーを意味し、追加のヘッダーなどを実際に追加することはできません。オープンソースなので可能かもしれませんが、私は組み込み開発者ではないことは間違いありません!
• WiFi は、それが提供されている小さな町を宣伝するために使用されるため、可能な限りきれいにする必要があります。

これらの制約を満たすために、次のように @font-face をデータ URI とともに使用しました。

それは魅力のように機能します... Firefoxを除いて。古い IE では動作しないことは理解していますが、それを使用する準備はできています。しかし、いわゆる最新のブラウザーがその機能を提供しないのは奇妙に思えます。なぜこれが機能しないのですか？

編集：もちろん、フォールバックについてはたくさんのアイデアがありますが、ここでの私の質問はもっとあります.なぜFirefoxは他のブラウザと同じではないこの動作をするのですか? セキュリティ設定ですか？data-uri 実装のバグ? data-uri のサイズ制限は?

キャンバスの背景として画像をレンダリングする次のコードがあります。

外部ファイルの代わりに、インライン画像を背景として使用したい場合はどうなりますか？例えば、

どうすればキャンバスの背景にすることができますか？

編集：これについて言及しているチュートリアル（https://developer.mozilla.org/en/Canvas_tutorial/Using_images）を見つけましたが、その使用方法については言及されていません。

データ URIを使用すると、画像などの外部リソースを Web ページ内に直接インライン化できます。8 ビット ASCII などの他の単純な形式でより効率的にエンコードできることを考えると、データ URI を Base64 でエンコードすることを要求する設計の正当性は、歴史的または現在のいずれにせよ何ですか?

サーバーから JSON を高速でストリーミングし、その一部を毎秒約 10 回表示する Web ページがあります。1 つの部分は、base64 でエンコードされた PNG 画像です。画像を表示するいくつかの異なる方法を見つけましたが、それらはすべて無制限のメモリ使用量を引き起こします。数分で 50MB から 2GB に増加します。Chrome、Safari、および Firefox で発生します。IEは試していません。

Activity Monitor.app を見て、最初にメモリ使用量を発見しました。Google Chrome レンダラー プロセスは継続的にメモリを消費します。次に、Chrome のリソース インスペクター ( View> Developer> Developer Tools、Resources) を見たところ、画像をキャッシュしていることがわかりました。img srcを変更するか、新しい Image() を作成してその を設定するたびにsrc、Chrome はそれをキャッシュしました。他のブラウザも同じことをしているとしか思えません。

このキャッシュを制御する方法はありますか? オフにすることはできますか？

編集: Safari/Mobile Safari でこの手法を使用できるようにしたいと思います。また、アイデアがあれば、画像をすばやく更新する他の方法も受け入れます。

ここに私が試した方法があります。それぞれが、AJAX の完了時に呼び出される関数に存在します。

方法 1 -タグにsrc属性を直接設定するimg

速い。きれいに表示します。狂ったように漏れます。

方法 2 - に置き換えimgてcanvas使用するdrawImage

正常に表示されますが、まだ漏れます。

方法 3 - バイナリに変換してcanvas内容を置き換える

ここで何か間違ったことをしています。画像が小さく表示され、ランダム ノイズのように見えます。この方法では、制御された量のメモリが使用されます (100 MB に増加すると停止します) が、特に Safari では低速です (CPU 使用率は 50% まで、Chrome では 17%)。アイデアは、この同様の SO の質問から生まれました: Safari でのデータ URI リーク (以前は: HTML5 キャンバスでのメモリ リーク)

（jpeg）画像を提供するこのWebサービスを入手しました。私が欲しいのは、この画像を取得し、それをデータURIに変換して、次のようにHTML5キャンバスに表示することです。

残念ながら、このコードは機能しません。画像はキャンバスにまったくペイントされていません（さらに、幅と高さが0のようですが、正しくデコードされない可能性がありますか？例外はありません）。img.srcは次のようになりますdata:image/jpeg;base64,77+977+977+977+9ABBKRklG....

解決済み：mimeタイプを次のようにオーバーライドする必要があることが判明しました：

応答タイプを次のように設定します。

（これを参照してください。応答タイプを変更する場合も、非同期要求を行う必要があります）。

javascriptファイルで次のように定義された「ダウンロードファイル」hrefがあります。

Chromeでは、期待どおりに機能します。つまり、このダウンロードリンクをクリックすると、ファイル名が「download.csv」になります。ただし、Firefoxでは、「puzdb.part」のような意味のない名前が付けられています。

誰かが私が間違っていることを教えてもらえますか？

ありがとう

編集：これがjsfiddleデモです：http：//jsfiddle.net/kLJz9/

編集＃2：Windowsでは、Chromeの.csv拡張子も配置されておらず、Firefoxの動作は同じです（つまり、.part拡張子）。

重複の可能性:
Javascript で画像データを取得しますか?
JavaScriptで画像をバイナリデータに変換する

私は持っている：

リモート サーバー上の画像へのリンクを含む文字列。

私が欲しい：

純粋にクライアント側の Javascript を介してこの画像を「取得」し、それを base64 dataURL 表現に変換します。

これは可能ですか？ どのように？