html - 保存 html Canvas 图像

Question

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

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

我对编码和自学非常陌生，因此对代码的任何额外评论以帮助我理解都将不胜感激。

Answer 1

关于第一个任务，您可以使用 canvas 对象支持的 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; 

关于第二个任务，在将 Canvas 保存为图像后，您可以使用 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