Question

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

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

我对自己的编码和自我教学非常陌生，因此任何有关代码的额外评论都会让我更加感激。

Answer 1

关于第一项任务，您可以使用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

Answer 2

你可能需要使用JavaScript和PHP。我并不精通这两个，所以我无法帮助你，但你应该查看如何在你的网站上建立数据库的教程。

Answer 3

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

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

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

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

保存html画布图像

3 个答案: