html5 – 保存html画布图像

前端之家收集整理的这篇文章主要介绍了html5 – 保存html画布图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道这个问题可能已经有了答案,但我还没有找到它,而且我的项目有一个截止日期.

所以我制作了一个html5画布,我希望能够用一个(或多个)按钮做两件事.@H_403_3@我希望用户能够通过单击保存按钮来保存他刚刚完成的操作,理想情况下我希望下载图像(而不是必须右键单击并“将图像另存为”.这就是我的意思能够做到这一点).@H_403_3@我还想保存图像(可能是数据库?还是服务器?我不知道它是如何工作的)所以绘图的一部分(或所有的,取决于代码的难度)之前已经完成的是在其他人登录时使用(不一定是具有相同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

猜你在找的HTML5相关文章