保存HTML画布图像 [英] Save a html canvas image

问题描述

我知道有可能是一个已经回答这个问题，但我一直没能找到它尚未有一个最后期限在我的项目。

I know there is probably an answer already to this question but I haven't been able to find it yet and there is a deadline on my project.

因此​​，我已做出了HTML5画布，我希望能够做两件事情有一个（或多个）按钮。
我希望用户能够节省点击保存按钮什么，他刚刚完成，理想情况下，我想下载（而不是让右点击保存形象的形象，这是我之所以能够到目前为止做的）。
我也想将图像保存（也许到一个数据库？或服务器？我不知道它是如何工作），这样的图纸（或全部，这取决于$ C $难度的一部分c）在已经做过用于下一次别人登录（不一定是同一个人用同一IP）。这可能吗？

So I have made an html5 canvas and I would like to be able to do two things with one(or more) buttons. I would like the user to be able to save what he has just done by clicking on the save button and ideally I would like the image to be downloaded (as opposed to having to right click and "Save image as". This is what I have been able to do so far). I would also like the image to be saved (maybe to a database? or a server? I don't know how it works) so that a part of the drawing (or all of it, depending on the difficulty of the code) that has been done before is used the next time someone else logs on (not necessarily the same person with the same IP). Is this possible?

我很新的code和自我自学等等code任何多余的意见，帮助我理解会比较-AP preciated。

I am very new to code and self teaching myself so any extra comments on the code to help me understand would be extra-appreciated.

推荐答案

关于第一个任务，你可以在画布内容的图像与支持 toDataUrl 方法导出画布对象。

Regarding the first task, you can export the canvas content to an image with toDataUrl method supported by the canvas object.

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调用上传影像结果到数据库。这里是如何使用它的一个简单的例子：

As regarding the second task, after you saved the canvas to an image you can upload the resulted image into the database by using an ajax call. Here is a simple example for how to use it:

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

有关完整的示例，请参阅这些文章：

For a full example see these articles:

<一个href=\"http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/\">http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

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

这篇关于保存HTML画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！