保存 html 画布图像答案

【问题标题】：Save a html canvas image保存 html 画布图像
【发布时间】：2013-02-08 23:08:39
【问题描述】：

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

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

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

【问题讨论】：

标签： html button canvas save

【解决方案1】：

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

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

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

(Rq : 这不会解决你所有的问题。)

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：