javascript - HTML5 キャンバスの詳細を MySql に保存する

Question

私はHTML5が初めてで、キャンバスデータを保存する方法を知りたいだけです(キャンバスに正方形を描きました)。データベースに x、y、h、w または縮尺を保存し、そのデータを使用して図面を再作成します。これどうやってするの ？

ありがとうございました。

Answer 1

それらをmysqlデータベースまたはサーバーファイルに保存できます。

mysql の場合、entities という名前のテーブルを必要な列または 1 列で作成し、保存するデータをシリアル化します。

例えば

id | x | y | h | w | scale
1    4   4   4   4    0.5

また

$object_cube = array();
$object_bube['x'] = 4;
$object_bube['y'] = 4;
$object_bube['h'] = 4;
$object_bube['w'] = 4;
$object_bube['s'] = 0.5;

次に、シリアル化して PDO クエリを作成します

$host =     "localhost";
$user =     "someuser";
$pass =     "somepass";
$database = "db_name";

$db = new PDO("mysql:host=$host;dbname=$database", $user, $pass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")) or die("Connection error!");
$ser_obj = serialize($object_cube);
$query = "INSERT INTO entities ('cube') VALUES (:object)";
$params = array(':object' => $ser_obj );
db_query($query, $params);

function db_query($q,$p = array())
{
    global $db;

    if($stmt = $db->prepare($query))
    {

        if(count($p) > 0)
        {
            foreach ($p as $key => $value) {
                $stmt->bindParam($key,$value);
            }
        }

        $stmt->execute();

    }

}

これは保存を処理する必要があり、データベースをマイニングして必要なときにいつでも必要なものをロードするのはあなた次第です:)

AJAX -> http://www.w3schools.com/ajax/default.asp および php や asp などのサーバー側言語に精通している必要があります。それ以外の場合は、ローカルに保存できます。

Answer 2

サーバー上のデータベースにアクセスするには、ユーザーのWebブラウザーからデータを受信し、それをデータベースに送信するサーバー側のアプリケーションが必要です。

クライアントとサーバー間の通信は、 XmlHttpRequestまたはWebSocketsを使用して実装できます。

サーバー上で実行されるWebアプリケーションは、NodeJS、PHP、ASP.NET、JSP、Django、Ruby on Rails、またはその他のサーバー側のWeb開発テクノロジーで実装できます。

または、サーバー側のプログラミングなしで実行する場合は、データをユーザーlocalStorageにローカルに保存することもできます。

Answer 3

考えられる解決策は、すべてのオブジェクト データを配列に格納し、サーバーに送信する前にシリアル化することです。

GraphicObjects = new Array();
GraphicObjects.push({
    x: 10,
    y: 10,
    w: 100,
    h: 200,
    scale: 0.5
}); // Write a function for adding new objects, that's just an example
$.post('urlToPostTo', data: GraphicObjects.stringify());

後で JSON データを取得して、画像を再描画します。