3

この質問にはおそらくすでに答えがあることはわかっていますが、まだ見つけることができておらず、私のプロジェクトには締め切りがあります。

だから私は html5 キャンバスを作成しました。1 つ (または複数) のボタンで 2 つのことを実行できるようにしたいと考えています。ユーザーが保存ボタンをクリックして今行ったことを保存できるようにしたいと思います。理想的には、画像をダウンロードしたいと思います(右クリックして「画像を名前を付けて保存」するのではなく)。今までできた）。また、画像を保存して（おそらくデータベースに？またはサーバーに？どのように機能するのかわかりません）、図面の一部（またはコードの難易度によってはすべて）が保存されるようにしたいと思います。他の誰かが次にログオンするときに使用されます (同じ IP を持つ同じ人である必要はありません)。これは可能ですか？

私はコードと自己学習に非常に慣れていないので、理解するのに役立つコードに関する追加のコメントは非常に高く評価されます.

4

3 に答える 3

6

最初のタスクに関してはtoDataUrl、オブジェクトでサポートされているメソッドを使用して、キャンバスのコンテンツを画像にエクスポートできcanvasます。

var canvas = document.getElementById("canvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");                // Get the context for the canvas.
    var myImage = canvas.toDataURL("image/png");      // Get the data as an image.
}

var image = document.getElementById("image");  // Get the image object.
image.src = myImage;

2 番目のタスクに関しては、キャンバスを画像に保存した後、ajax 呼び出しを使用して結果の画像をデータベースにアップロードできます。これを使用する方法の簡単な例を次に示します。

$.ajax({  
        url: "upload.php",  
        type: "POST",  
        data: formdata,  
        processData: false,  
        contentType: false,  
        success: function (res) {  
            document.getElementById("response").innerHTML = res;  
        }  
    });

完全な例については、次の記事を参照してください。

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

http://coursesweb.net/ajax/upload-images

于 2013-02-23T10:33:13.590 に答える
0

おそらく JavaScript と、場合によっては PHP を使用する必要があります。私はそれらの両方に堪能ではないので、あなたを助けることはできませんが、あなたのウェブサイトでデータベースを作成する方法についてのチュートリアルを調べる必要があります.

于 2013-02-23T10:32:55.043 に答える