3

我知道这个问题可能已经有了答案，但我还没有找到答案，而且我的项目有截止日期。

所以我制作了一个 html5 画布，我希望能够用一个（或多个）按钮做两件事。我希望用户能够通过单击保存按钮来保存他刚刚所做的事情，理想情况下我希望下载图像（而不是必须右键单击和“将图像另存为”。这就是我到目前为止已经能够做到）。我还希望保存图像（可能保存到数据库？或服务器？我不知道它是如何工作的），以便绘图的一部分（或全部，取决于代码的难度）之前已经完成，下次其他人登录时使用（不一定是同一人，同一个IP）。这可能吗？

我对代码和自学非常陌生，因此对代码的任何额外评论以帮助我理解都会受到额外的赞赏。

4

3 回答 3

6

toDataUrl关于第一个任务，您可以使用对象支持的方法将画布内容导出到图像canvas。

var canvas = document.getElementById("canvas");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");                // Get the context for the canvas.
    var myImage = canvas.toDataURL("image/png");      // Get the data as an image.
}

var image = document.getElementById("image");  // Get the image object.
image.src = myImage;

至于第二个任务，在将画布保存到图像后，您可以使用 ajax 调用将结果图像上传到数据库中。这是一个如何使用它的简单示例：

$.ajax({  
        url: "upload.php",  
        type: "POST",  
        data: formdata,  
        processData: false,  
        contentType: false,  
        success: function (res) {  
            document.getElementById("response").innerHTML = res;  
        }  
    });

有关完整示例，请参阅以下文章：

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

http://coursesweb.net/ajax/upload-images

于 2013-02-23T10:33:13.590 回答
0

您可能需要使用 JavaScript 和 PHP。我对这两个方面都不精通，所以我无法帮助你，但你应该查看有关如何在你的网站上制作数据库的教程。

于 2013-02-23T10:32:55.043 回答
0

我想你可能有兴趣看看 html5 文件 api：

http://updates.html5rocks.com/2012/08/Integrating-input-type-file-with-the-Filesystem-API

它将允许您在没有服务器端代码的情况下处理您的问题。

（Rq：这不会解决你所有的问题。）

于 2013-02-23T11:22:20.277 回答