問題タブ [data-url]

ユーザーがキャンバスにレンダリングされた画像を保存できるようにしようとしています。複数のイメージが存在する可能性があり、ユーザーがすべてのイメージを 1 つの tar ファイルとして一度にダウンロードできるようにしたいと考えています。この tar ファイルを生成するコードを作成しようとしています。ほとんどの作業は完了していますが、最後に tar ファイルがコンピューターにダウンロードされると、png ファイルを構成するバイナリ データの一部が破損していることに気付きます。関連するコードは次のとおりです。

以前にレンダリングされたフレームをレンダリングされていないキャンバスに配置し、canvases toDataURL() メソッドを使用して、Base64 エンコーディングでエンコードされたフレームの png バージョンに変換しています。次に、生成する tar ファイルの内容に追加できるように、atob を使用してこれをバイト文字列に変換します。

16 進エディタでファイルを表示すると、tar ヘッダーは正しいのですが、png の内容が正しくありません。ASCII の内容は正常に見えますが、バイナリ データはスクランブルされています。

提供されたヘルプは大歓迎です。ありがとう。

PS

私が見た関連記事へのリンクを添付しました。それらは役に立ちましたが、私の問題を完全に解決するものはまだ見たことがありません. ありがとう。

データ URI をファイルに変換してから FormDataに追加し、データ URI を chrome/ff の createObjectURL を使用してオブジェクト URL に追加します。

(Java) バックエンドでいくつかのバーコードを作成する 2D バーコード ジェネレーターがあります。それは私にデータ URL を与え、Javascript を使用してクライアント側でそれらを設定します。Chrome、Firefoxではすべて正常に動作します。しかし、IE8 では (もちろん!) 画像の半分は機能し、半分は機能しません。

私の画像は数百バイトです（32kbよりはるかに少ない）

IE8 で動作しない例を次に示します。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAAAAADFHGIkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAAAgklEQVR42nVRixKAMAjy/3+a2hBwdVtdD1RELFxOXS6+9v1+F/+ICFs5jpGqsQWSosy3MQbVGSEDC7q4FaQrRiJDepJ1iG2sATggaqkeCc3VqicDDu6omgk1VdmS4W3Uq4sr4hE8llSYKe7GXsTxTPdZTdlyLQA4xrKQOit+Ryv7nwfFATbY5mERHQAAAABJRU5ErkJg

IE8 で動作する例を次に示します。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABTCAAAAADG2WTcAAAACXBIWXMAACZzAAAmcwHzbHUKAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAABAklEQVR42u2ZwQ7AIAhD+f+f3nbwMGwBl3hYg1xM5ngmUBE3u/abCTHtMTZcS4N3O0z3dNiYg+eeickZ02LMVzRcPJ0DD77zPsw5CQv6BGaYIwkmxo6+/V7S2CKHGShvYaNDmngN+T0TfGk9Y/E0DL4YkxVsWCQsSGGOOjPhHaNVfM5W2YMpMCFu2A3QQyHb722ZkQAT+dLzVJEJvqz4hYqc1H2Y4XHgU0WPCmzFxJhMjrTO00K3uDd7MXm8SSdKc1fej/7LLGTK+8yvPW0jZrGZ15sQXWbUGCTXOXIoiDGLLx3RUN1lOjOzCp5MkzZUmlkIM9JnGs9ezF2mxuz8r2e33b2PHKlEJ4PKAAAAAElFTkSuQmCC

ここにフィドルがあります。JS fiddle は IE8 ではうまく機能しないため、このリンクを使用して結果を直接表示してください。

この問題の原因がわかった場合は、共有してください:)

p01の MATRAKAを取ります。

リンクされた URI で提供されるコンテンツを base64 化し、データ URI に入れます。

Content-Type が適合します。これは、HTTP 経由で提供するために使用するものと同じです。しかし、URI に移動しても Chrome では何も起こりません。Web コンソールのエラー メッセージすら表示されません。Firefoxで動作します。

Chrome over HTTP で動作するのに Data URI スキームを使用しないのはなぜですか?

UIImageデータURIに変換して挿入したいインスタンスがあるとしますUIWebView.

/メソッドNSDataを使用して UIImage を PNG/JPEG に変換できることはわかっています。しかし、変換がbase64であることを確認するにはどうすればよいですか? 次に、実際の URI とヘッダーが存在する文字列を作成するにはどうすればよいでしょうか?PNGRepresentationJPEGRepresentation

私のサイトに今すぐ WYSIWYG エディターを追加したいと考えています。<img src="data:image/jpeg;base64,STUFFSTUFFSTUFFHERE"ファイルのアップロードを管理するのに不便なため (数時間作業を行う必要があります)、テキストを編集して画像をデータ URLとして埋め込むことができるエディターを探していました。

そのようなエディタが見つからなかったので、そのような画像処理方法を広めることができなくなった何らかの目的があるのではないかと今考えています。

誰かが理由を教えてもらえますか?

特定のリストをループして、常にキャンバスを再描画しようとしています。キャンバスを再描画した後、キャンバスの dataurl を受け取り、それを配列にプッシュしようとしています。その部分は機能しますが、常に最初のものと同じ dataurl が返されます。

キャンバスで図面を見ると、常に正しい結果が得られますが、その図面のデータ URL を取得できません。

誰か助けてくれませんか？

jQueryでdata-urlを変更しようとしています。現在、私のコードは次のようになっています。

ご覧のとおり、url-data を空白のままにしておいたので、jQuery でのみ設定されていることが確認できました。ただし、つぶやきボタンをクリックするたびに、現在のページへのリンクを含むウィンドウが常に開きます。jQueryまたはjavascriptを介して別のものに設定する方法を誰かが説明できますか?

PHP でページを生成しており、生成されたページをブラウザーでできるだけ速くロードしたいと考えています。ページ (.htmlページ) を生成するときに、次の 2 つのオプションがあることに気付きました。

データ URL 画像のあるページ

「通常の」画像を含むページ

DataURL には長所と短所があります。

長所：

• ブラウザーからサーバーへの移動が少ない (移動は 1 回のみ) - 生成された性質を考えると、これと CSS を維持する必要があるため、このプロジェクトではスプライトの使用はうまく機能しません。

• 画像が小さいほど帯域幅の使用量が少ない

• HTTPS ではるかに高速

短所：

• base64 エンコーディングのため、画像サイズが大きくなります (約 37% 大きくなります)。

• IE7 と IE8 では動作しません。32KB のサイズに制限があります。

「ワントリップ」は本当に大きな違いを生むでしょうか？それはユーザーにとって目立ちますか？

次のコードを使用して、バイト配列から画像データ URL を生成しようとしています。

byteArrayOutStreamjpgファイルとして保存してデバイスで表示することをテストしたため、正しいデータが含まれています。

logcat の結果をファイルにパイプし、行全体をコピーして Chrome に貼り付けることで、データ URL 出力をテストします。

クロムに表示されるものは完全に空白です。Chrome インスペクタで確認すると、正しいサイズの空白の JPG があります。

jpgファイルでダウンロードしてWindowsフォトビューアーで開いてみました。破損しているようです：

ただし、画像の左上隅に見える部分だけが正しいデータです。