我知道这个问题可能已经有了答案,但我还没有找到它,而且我的项目有一个截止日期.
所以我制作了一个html5画布,我希望能够用一个(或多个)按钮做两件事.
我希望用户能够通过单击保存按钮来保存他刚刚完成的操作,理想情况下我希望下载图像(而不是必须右键单击并“将图像另存为”.这就是我的意思能够做到这一点).
我还想保存图像(可能是数据库？还是服务器？我不知道它是如何工作的)所以绘图的一部分(或所有的,取决于代码的难度)之前已经完成的是在其他人登录时使用(不一定是具有相同IP的同一个人).这可能吗？
我对代码和自我教学都很陌生,所以对代码的任何额外评论都会让我更加感激.
解决方法
关于第一个任务,您可以使用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