問題タブ [data-url]

申し訳ありませんが、タイトルが私がやろうとしていることについてあまり明確ではないかもしれません.

説明させてください。ボタンがあるhtmlページがあります。ボタンをクリックするとすぐに、phpページが（バックグラウンドで）実行されます。このページは（データベースから）キャンバスを生成し、そのキャンバスはエンコードされた画像（base64）に変換され、これがそのphpページのimgソースに追加されます（これは機能します）。今私が欲しいのは、その img ソースを取得し、それを html ページ (ボタンがある場所) に表示することです。

サンプルコードが必要な場合はお知らせください。

誰かがこれで私を助けてくれることを願っています。ありがとう

「preview15.php」ファイルで「preview16.php」から送信された画像を表示したい。base64 エンコーディングを使用していますが、IE 7 では機能しません。イメージ タグで使用したいです。また、アップロードした画像をどのディレクトリにも保存したくありません。私の preview16.php

私の preview15.php ファイルは次のようになります。

?>

DataURL から取得したこの文字列から、これをファイルとしてダウンロードする最良の方法は何ですか?

これまでのところ、basic を使用してwindow.open("myDataURL");いましたが、この方法でファイル名を変更することはできません。

このデータを適切に処理する方法があるかどうか疑問に思っていました。

誰でもjQuery Mobileの「data-url」属性にもっと光を当てることができますか?

jQueryモバイルWebサイトからコンテンツをコピーして貼り付けることは避けてください。これは、私のように同じ混乱状態で同じことを探している他の人を確実に助けることができます.

私は現在、Google Closure Library を使用して HTML5 WYSIWYG を作成しています。ユーザーは、画像ファイルを contenteditable フィールドにテキストでドラッグ アンド ドロップして画像を追加できます。

したがって、これらの画像を保存する方法は 2 つあります。

1.ドロップされたファイルからデータ URL を取得し、IMG タグを作成し、取得したデータ URL をこの画像の属性 SRC の値として設定し、この IMG タグをエディターのフィールドに挿入します。ユーザーがフォームを送信すると、取得したすべての HTML が MySQL データベースに保存され、後で画像付きのテキストをレンダリングできるようになります。

2.ドロップした画像をサーバーにアップロードし、通常のファイルとして保存します。サーバーは次のように応答します:「画像が保存されました。その URL はhttp://example.com/images/uploaded-image.pngです」。その後、項目 1 と同様の手順を実行します (属性 src="http://example.com/images/uploaded-image.png" を持つ IMG タグを作成し、編集可能なフィールドに挿入します)。

最初の方法では、画像 dataUrl をテキストと共にデータベース フィールドに格納する必要があるため、データベースの負荷が高くなります。ただし、画像の追加がより簡単かつ迅速になるため、ユーザー エクスペリエンスが向上します。

2 番目の方法では、画像が (ファイル システムに) 個別に保存されるため、データベースへの負荷は少なくなりますが、サーバーへの要求が多くなり、各画像が WYSIWYG 内のテキストに追加されるたびにプロセッサ時間が必要になります。また、ユーザーにすぐに結果が表示されないため、ユーザーは画像がアップロードされるまで待つ必要があり、ユーザー エクスペリエンスが悪化します。

すべての長所と短所を考慮して、私の場合、どちらの方法がより好ましいかを理解するための助けが必要です.

DataUrl に画像があり、ディスクに保存する必要があります。通常の「Web URL から保存」スタイルを使用するだけですか、それとも HttpWebRequest を使用せずにこれを行う簡単な方法はありますか?

2 つの質問が一緒に機能するので、1 つにまとめます。

ユーザーが 1 つの HTML5 キャンバスに描いたものを別のキャンバスに複製しようとしています。

これを行うには、javascript を使用して dataURL を取得し、その dataurl に新しい画像を割り当ててから、その画像を割り当てて 2 番目のキャンバスの drawImage を描画します。これがコードです。

このコードの問題は、複製ボタンを 2 番目のキャンバスに表示するために 2 回押す必要があることです。これは、関数内のすべてを一度に実行しようとしているためだと思います。最初に複製をクリックすると、dataURL と img src が同時に設定され、img.src が空の文字列として表示されます。クリックした 2 番目のタイプは、dataURL がそれであり、img.src がそれを認識していることを既に述べました...

これを修正するにはどうすればよいですか?

ただし、私の主な目標は、この dataURL をデータベースに保存することです。get メソッドで ajax を使用しようとしましたが、ここでの問題は、dataURL に get で問題を引き起こす非常に多くの文字が含まれていることです。

データベースに保存できるように、dataURL をエンコードして get/ajax 対応にする特別な方法はありますか?

どうもありがとうございました！

html5キャンバスへの描画に基づいてイベントトリガーを探すコードを実行しています。描画を停止すると、dataURLが入力フィールドに送信されます。そこから、dataURLをデータベースに保存します。

これは次の場合に機能します。

バージョン「icecreamsandwhich」を実行しているAndriodパッドIpadPCMAC

次のタブレットでは動作しません：「honeycomb」を実行しているKindle Fire Android Pad

dataURLを入力に入れるコードは次のとおりです。

動作するものでは、フィールドの出力は次のようになります。

動作しないものの場合、出力コードは次のとおりです。

キャッシュと履歴をクリアしようとしたこと。この製品はクロスプラットフォーム向けに作成されており、すべてのタブレットとそのデフォルトのブラウザーで機能する必要があるため、デフォルト以外のブラウザーの使用を避けようとしています。

また、コピー/貼り付けで問題なくdataURLを入力フィールドにプルしましたが、canvas.dataURLを使用してプルすることはできません。

私はブラウザがhtml5のこの部分をサポートしていないと仮定していますが、他の仮定もあります。

助けてくれてありがとう。

URL からキャンバスに画像を読み込んでから、dataUrl を取得し、これを使用して画像のサイズを調べようとしています。

その結果、画像が本来よりもはるかに大きく表示されます。

たとえば、60kb のイメージをロードすると、デコードされた変数は 134kb を返します。

私のPCにローカルに保存された画像で同じコードを実行すると、代わりにファイル入力からファイルオブジェクトを取得し、返される値は正しいです(たとえば 60kb )。

これは私が使用しているコードです:

dataUrl を使用して画像を再度出力して保存しようとしましたが、それでも画像は元のサイズの 60Kb ではなく 134kb になります。

base64エンコーディングは画像を1.37倍ほど大きくすることを理解していますが、ファイル入力から画像オブジェクトを取得するときの値は正しいです。

圧縮レベルが失われているかどうかわかりませんか? または、どうにかしてファイル オブジェクトからこれを取得し、それを使用して toDataUrl() 関数の 2 番目のパラメーターを設定できますか?

これに特に関連する情報をオンラインで見つけることができないため、情報をいただければ幸いです:)