Javascript HTML5画布-保存和恢复拖放画布状态

使用此我可以动态创建画布，并在所有不同画布之间拖放图像

var next = 4

    function addCanvas() {
        // create a new canvas element
        var newCanvas = document.createElement("canvas");
        newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id
        next++;
        newCanvas.width = canvasWidth;
        newCanvas.height = canvasHeight;
        // add a context for the new canvas to the contexts[] array
        contexts.push(newCanvas.getContext("2d"));
        // link the new canvas to its context in the contexts[] array
        newCanvas.contextIndex = contexts.length;
        // wire up the click handler
        newCanvas.onclick = function (e) {
            handleClick(e, this.contextIndex);
        };
        // wire up the mousemove handler
        newCanvas.onmousemove = function (e) {
            handleMousemove(e, this.contextIndex);
        };
        // add the new canvas to the page
        document.body.appendChild(newCanvas);
    }

问题：

$("#saveCanvasStates").click(function () {
     // save canvases and images on them to a database
});

在画布之间进行拖放操作后，用户需要能够按下“保存”按钮（如图所示），将所有画布的当前状态保存到数据库中，即：

• 将所有画布保存到数据库中
• 保存在哪些画布上的图像

这是为了用户可以稍后返回并从停止的位置继续进行操作——拖放功能仍然有效

---

执行此操作的最佳方式是什么？

保存/恢复用户工作所需的所有信息都在states[]数组中，该数组包含定义所有拖放项状态的javascript对象

实际上

…有很多关于序列化、传输、保存、检索和反序列化javascript对象的信息；）

要序列化javascript对象，请使用

JSON.stringify

，它可以将对象数组序列化为单个JSON字符串（JSON代表JavaScriptObjectNotation）。这个字符串很容易传输到服务器，以便发布到数据库

要获取您的状态信息，您可以要求服务器返回相同的JSON字符串。您可以使用

JSON.parse

将该JSON字符串转换回一个对象数组

要传输和接收JSON数据字符串，可以使用jQueries

$.ajax

方法。Ajax可用于向服务器发送信息——这称为Ajax帖子。Ajax可用于从服务器请求信息——这称为Ajax GET

当您的服务器收到POST请求时，它将获取您提供的JSON字符串并将其保存在数据库中

当服务器收到GET请求时，它将查询数据库以检索保存的JSON字符串并将其发送回用户

设置服务器和数据库超出了stackoverflow问题的范围，但这里有一系列不错的教程，介绍如何将jQuery、JSON、Ajax、Php和MySQL数据库一起用于保存和恢复状态：

www.youtube.com/watch？v=Yz0RF_uumfdu

下面是一个用于序列化和发布状态信息的客户端代码的快速示例：

// Serialize the states array

var JsonStringForTransport = JSON.stringify({stateForUserNumber7: states});

// POST the JSON to your server

var thePost = $.ajax({
    url: 'saveToServer.php',
    type: 'POST',
    dataType: 'json',
    data: JsonStringForTransport,
    contentType: 'application/json; charset=utf-8'
});

thePost.always(function(result){  
    // use this during testing to be sure something's happening
});

thePost.fail(function(result){  
    // handle failure
});

thePost.done(function(result){  
    // handle success
});

---

祝你的项目好运！：）

太好了，我会好好看看这些视频。是的，现在我知道谷歌要做什么了，有大量的信息可以找到：），非常感谢。回到这里。。。我已经在Save按钮中添加了Ajax POST代码，当我在Firebug中按下它时，我可以看到控制台中出现POST请求。我将使用Perl的Catalyst MVC框架和Postgresql作为数据库。我在帖子中使用的url是

主屏幕

。那么我的想法是否正确，我现在需要找到如何获取提供给

主屏幕

页面（Perl）的JSON字符串，然后将JSON字符串保存到Postgres谢谢，洛蒂没有使用Catalyst，但是是的……您将JSON字符串化JS对象提供给POST控制器。然后执行插入操作，将JSON字符串保存到postgresssql数据库中。如果您将要求降低为：用户可以回到他使用的同一个浏览器并继续他离开的地方，那么您可以使用localStorage和FileAPI，这将更容易（尤其是对于localStorage）。