保存html画布图像

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