如何将 html5 画布作为表单发布的一部分提交? [英] How to submit html5 canvas as part of form post?

问题描述

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

I'm looking to stream the image data from a canvas tag to a node.js server. I can handle the server-side code myself, but how can I submit the data from a canvas? I'm hoping for a suggestion involving multipart form data because I want to stream the data, since I'm expecting images in the ballpark of 50 MB or so. If I try to post the data all at once, it tends to crash the client's browser.

推荐答案

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

You can use FormData to emulate a normal "multipart/form-data" file submit:

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");

画布方法 .toBlob 是 指定但未实现，你可以使用polyfill例如 canvas-to-blob.js

The canvas method .toBlob is specified but not implemented, you can use a polyfill such as canvas-to-blob.js

这篇关于如何将 html5 画布作为表单发布的一部分提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！