软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

html5 – 保存html画布图像

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

所以我制作了一个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

总结

以上是为你收集整理的html5 – 保存html画布图像全部内容,希望文章能够帮你解决html5 – 保存html画布图像所遇到的程序开发问题。