javascript - 将 HTML5 Canvas 详细信息保存到 MySql

Question

我是 HTML5 新手，我只是想知道如何保存 Canvas 数据(我在 Canvas 上画了一个正方形)。我想在数据库中保存 x、y、h、w 或比例，并使用该数据再次重新创建绘图。我该怎么做？

谢谢。

Answer 1

你可以将它们存储到 mysql 数据库或服务器文件中。

如果是 mysql，则创建一个名为实体的表，其中包含您想要的列甚至 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。否则，您可以将其存储在本地。