2

だから私はユーザーが署名するキャンバスを持っています.今ではそれをbase 64文字列に変換するのではなく、画像自体として保存したいだけです. html5で行う最も簡単な方法は何ですか??

4

2 に答える 2

2

私はここで同様の質問に答えました：

ユーザーイベントのシミュレーション

ローカルに保存していると仮定します

データURLから画像を作成する方法をとることはできますが、それを保存することは、HTML5を使用して現在あまりうまくいかない難しい部分です。downloadブラウザにの属性が組み込まれていれば、すぐに改善されることを願っていますa tag。

明らかに、標準のWebページよりも高い権限を持っている場合...つまり、ブラウザプラグインを設計している場合は、他のオプションがあります...

このようなものを自分で実装する場合、現時点では、ローカルコンピューターへの保存を処理するためにフラッシュプラグインを使用することを認めます。

リモートで保存していると仮定します

その音ではサーバーに保存していませんが、そうであれば、base64情報をサーバー側のスクリプト言語（PHPなど）で記述されたスクリプトにPOSTし、それを取得してデータを書き込むだけで、これは非常に簡単です。ファイルのバイナリとして直接。もちろん、これを安全に行う必要がありますが、サーバーのファイルシステムにバイナリデータだけを書き込む必要はありません。

両方の長所

開発時間があれば、Flashを使用せずにローカルに保存されたキャンバスイメージを取得する最良の方法は、サーバーにデータを保存する代わりに、直接送信したBase64情報を実際に書き込むサーバー側スクリプトを作成することです。実現されたバイナリイメージファイルとして。このようにして、Base64データを新しいタブに投稿するフォームを作成できます。このリクエストはサーバー側で評価され、バイナリイメージが返されます...その時点で、ブラウザはユーザーに保存場所を尋ねます。画像。

（ブラウザ内に表示するのではなく）画像を強制的にダウンロードするには、正しいヘッダーを定義する必要があります。これを強制する簡単な変更は、サーバー側スクリプトのContent-typeヘッダーを'image/octect-stream'...に設定することです。設定する他のヘッダーオプションがあり、最もよく調査されます（つまり、ファイル名を制御するヘッダーなど）。

Reflect.php

<?php

/// a simple example..

if ( array_key_exists('data', $_POST) && ($data = $_POST['data']) ) {

  header('Content-type: image/octet-stream');
  echo base64_decode( $data );
  exit;

}

とフォーム...

<form action="reflect.php" method="post" target="_blank">
  <input name="data" type="hidden" value=" ... Base64 put here with JS ... ">
</form>

（フォーム全体を動的に作成し、JavaScriptを使用して自動的に送信する必要があります）

ユーザーエクスペリエンスの向上

新しいタブが作成されないようにする方法はいくつかありますが、これらの他の方法でブラウザ間の問題が発生しないことを確認する必要があります。たとえば、フォームデータをiframeの一部として投稿できます（プロセスを非表示に保つ）、または現在のウィンドウに直接データを投稿する（..そして、すべてのブラウザがページのコンテンツを置き換えるのではなく、正しいリクエストを受信して​​ダウンロードを開くことを期待します-ほとんどの最新のブラウザはこれを処理する必要があります）。

セキュリティの向上

バイナリデータを自動的に返すPHPスクリプトに関しては、このスクリプトへのアクセスをone time use key/authentication tokenまたは同様のもので保護し、受け入れるBase64データの量に制限を設ける必要があります。ユーザーが送信するものでサーバーを変更していないため、セキュリティ上のリスクをもたらすとは思われないかもしれませんが、この世界の危険な人々はスクリプトを取得し、それを使用して他のユーザーにダウンロード要求を送信する可能性があります。 。これをダウンロードすると（そして不要なトロイの木馬やウイルスであることが判明した場合）、サーバーは危険なファイルを提供することを暗黙的に行います。

概して

デスクトップに保存された画像のような単純なものを取得するために必要な努力のために、私はあなたが次のことをしたことを非難しません：

  • （キャンバスからスナップショットを取得した後）ページに画像を埋め込み、右クリックして名前を付けて保存するようにユーザーに依頼します...

うまくいけば、将来のことがこの状況をより良くするでしょう...

于 2012-08-30T11:06:40.440 に答える
2

この方法で簡単に実行できます (この場合は形式をpngに指定します)。

var img = canvas.toDataURL("image/png");

さまざまな画像形式を指定できます。この回答を見てください。

于 2012-08-30T11:02:46.037 に答える