HTML5将canvas保存至服务器文件

Question

我需要使用 HTML5 Canvas 来创建一个组件，用户可以在给定的图片上进行绘制，并且可以通过“保存”按钮直接上传自定义版本到服务器。

我可以使用 HTML Canvas 吗？ 有什么建议吗？

谢谢。

- GiulianoGro

Answer 1

你可以通过以下方式获取图像的数据URL：

var dataUrl = document.getElementById('your-canvas').toDataURL();

您可以将这个（非常长的字符串）发送到服务器并在解码后保存到文件中（它是以base64编码的）。

编辑：请记得通过POST提交，如评论中所建议的那样。GET在各种浏览器中有一些长度限制，因此使用如此巨大的数据量很可能会超过这些限制。

- jwueller

---

请使用POST作为Ajax方法。GET可能会因其大小而出现错误。 - Pekka

Answer 2

请注意，这在Android上目前是无法使用的（包括2.3及以下版本）。请给这个问题点个赞 - http://code.google.com/p/android/issues/detail?id=7901。

- James Koch