保存 html 画布图像

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

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

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

关于第一个任务，您可以使用以下命令将画布内容导出到图像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