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

Question

我是 HTML5 新手，我只想知道如何保存画布数据（我在画布上画了一个正方形）。我想在数据库中保存 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。否则，您可以将其存储在本地。

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 数据以重绘您的图像。