1

私はまだこのプロジェクトの予備的な「把握」段階にあるので、これが基本的なものである場合は申し訳ありません。基本的なドラッグ アンド ドロップ入力をシャツのグラフィック フィールドに入力し、サイズを変更してシャツ フィールド内を移動し、最終的にこれをいくつかのテキスト入力フィールドと共に送信する、Web サイト用の html5 T シャツ デザイン アプリを作成しています。顧客は、デザインしたシャツの代金を支払い、注文を送信します。私はhtml5に比較的慣れていないので、キャンバスとドラッグアンドドロップ機能を使用することをこれまでに理解しました。私の質問は、顧客がいくつかの情報を入力するためのテキストフィールドやいくつかのチェックボックスフィールドなどと一緒にこれを使用し、注文全体の一部として送信する必要があるため、キャンバスをフォームに含めることができるかということです。フォームの？繰り返しますが、これが基本的なものである場合は申し訳ありません。ご意見ありがとうございます。役立つチュートリアルなどのリードは素晴らしいでしょう。しばらく探していましたが、本当に探しているものが見つかりませんでした。

4

1 に答える 1

3

残念ながら<canvas>、入力フォームとして使用することはできませんが、できることは、キャンバスに描画し、描画操作が完了したら、その内容を .xml に「エクスポート」すること<image>です。幸いなことに、画像をフォームとして使用できます。

キャンバスの内容を画像に描画する標準的な方法は、canvas.toDataURL("image/png");メソッドを使用することです。

コードに変換すると、これは次のスニペットのようになります。

var canvasURL = canvas.toDataURL("image/png");
var img = document.getElementById("image").src = canvasURL;

HTMLでは<input>、IDでフォームを定義しますimage

<form>
     <input type="image" id="image" onsubmit="submit();">
</form>

ただし、対処する必要があるセキュリティ上の問題が 1 つあります。キャンバスに描画されるすべての画像は、それを実行するコードと同じドメインの同じ Web サーバーでホストする必要があります。この条件が満たされない場合、SECURITY_ERR 例外がスローされます。

画像とキャンバスを操作するためのより強力なライブラリが必要な場合は、キャンバスと画像の操作を容易にするこのライブラリをお勧めします: http://www.nihilogic.dk/labs/canvas2image/

于 2012-09-17T18:50:17.517 に答える