0

両側に2つのボックスがある場合、ボックスにはそれぞれ5つのエントリがあり、左側のボックスには犬、猫、虎、象、猿などの動物の名前があります。権利は牛乳、山羊、ココナッツ、骨、バナナになります。

今、canvas element私はこれらの2つのボックス要素をマップして結果を保存するDatabase必要があり、次回もそれを再度取得する必要があります。

これを実装するにはどうすればよいですか？

前もって感謝します..

4

1 に答える 1

1

キャンバスをデータベースに保存する場合は、キャンバスをBase64文字列に変換してから、次のようにこの文字列をデータベースに保存する必要があります。

<input type="text" name="mybase64" />

<script type="text/javascript">
    function saveClicked() {
        var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/jpeg");
        $("input[name=\"mybase64\"]").val(dataURL);
    }
</script>

次に、このmybase64を、受信するWebサービス/コードビハインドページに投稿し、この文字列をストレージメディアに書き込みます。画像をキャンバスに再描画するには、DBからbase64文字列を取得し、次のようにキャンバスに書き込みます。

function drawCanvas(myBase64String) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = myBase64String;
    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
}

質問に対する主な答えは、キャンバスをデータベースに保存する場合は、base64形式で実行する必要があるということです。

于 2012-07-31T09:35:17.187 に答える