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

Question

i'm new to HTML5 and i just want to know how can i save the canvas data ( i have drawn a square on the canvas ). I wanna save x,y,h,w or scale on the database and use that data to recreate the drawing again. How can i do this ?

Thank You.

Answer 1

Well you could store them into a mysql database or a server file.

In case of mysql create a table named entities with the columns you want or even 1 column and serialize the data you want to store.

For example

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

or

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

then serialize and create your PDO query

$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();

    }

}

this should take care of saving after that is up to you to load what you want whenever you need it by mining the database :)

You 'll have to be familiar with AJAX -> http://www.w3schools.com/ajax/default.asp and some server side language like php or asp. Otherwise you could store it locally.

Answer 2

In order to access a database on a server, you will need a server-sided application which receives the data from the users web browser and then sends it to the database.

The communication between client an server could be implemented with XmlHttpRequest or WebSockets .

The web application which runs on the server could be implemented in NodeJS, PHP, ASP.NET, JSP, Django, Ruby on Rails or any other server-sided web development technology.

Alternatively, when you want to do it without server-sided programming, you could also store the data locally in the users localStorage .

Answer 3

A possible solution is to store all the object data in an array and serialize it before sending it to the server:

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());

Later retrieve the JSON data back to redraw your image.