如何提交 html5 画布作为表单帖子的一部分？答案

【问题标题】：How to submit html5 canvas as part of form post?如何提交 html5 画布作为表单帖子的一部分？
【发布时间】：2012-07-27 07:59:53
【问题描述】：

我希望将图像数据从画布标签流式传输到 node.js 服务器。我可以自己处理服务器端代码，但如何从画布提交数据？我希望提出涉及多部分表单数据的建议，因为我想流式传输数据，因为我期望图像在 50 MB 左右的范围内。如果我尝试一次发布所有数据，它往往会使客户端的浏览器崩溃。

【问题讨论】：

我不知道使用多部分表单数据的方法，但是您尝试过canvas.toDataURL()（base64 编码）和 AJAX 吗？这会使客户端的浏览器崩溃吗？
toDataURL() 本身不会使浏览器崩溃，但是尝试对其进行任何操作（例如正常发布它）确实会使浏览器崩溃。我曾经将此应用程序发布到 php 服务器，但现在我正在转换为 node.js，所以我不确定它会有多大不同，但我敢打赌那里有人知道如何做我要问的事情.
为什么会“使浏览器崩溃”？这似乎非常值得怀疑。 edit 哦，等等，刚刚看到 50MB 的部分。
“它往往会使客户端的浏览器崩溃” 有或没有 AJAX？ 没有 AJAX 应该没问题

标签： javascript html node.js canvas stream

【解决方案1】：

您可以使用FormData 模拟普通的"multipart/form-data" 文件提交：

canvas.toBlob( function(blob) {

    var formData = new FormData();

    formData.append("image_file", blob );
    var xhr = new XMLHttpRequest;
    xhr.open( "POST", "abc.php" );
    xhr.send(formData);

}, "image/png");

canvas方法.toBlob是specified但是没有实现，可以使用polyfill 比如canvas-to-blob.js

【讨论】：

@PatrickRoberts 我说它 [canvas.toBlob] 没有实现，所以没有 polyfill 根本不支持它。 FormData 构造函数的参数是可选的 Form 元素，而不是 blob。 Syntax new FormData ([in HTMLFormElement form])
@PatrickRoberts 你是什么意思？如果有FormData，就有FormData#append。如果有画布，就有FormData。顺便说一句，您不能自己将文件添加到表单中。这样做是在 base64 中提交一个巨大的字符串，它不仅比文件本身大 33%，即使存在这样的东西，也没有进行文件提交优化。
@PatrickRoberts 对那个 [FormData without append] 的任何引用？ .toBlob 的实现有什么问题？无论如何，您必须将画布数据转换为 blob 才能使用 FormData。
嘿，只是在我从未回答过的聊天中回答你的问题，我指的是分形的 50 MB 图像。自从这篇文章以来，我已经使用该 polyfill（将 blob 的对象 URL 附加到具有下载属性的锚点）在 HTML5 和 JavaScript 中制作了大约 3 个不同版本的分形生成器，并且效果很好。我最近还制作了一个 10k 分辨率的分形，大小约为 98 MB，Chrome 中的 toBlob polyfill 没有内存问题，再次感谢！