Question

我有一个HTML5 Canvas元素。我需要将画布图像提交给我的服务器。它在我尝试的所有PC浏览器中都能正常工作，但iOS Safari在日志文件中因内存不足而崩溃。画布图像几乎为500 KB，因为它是950x323 PNG。这是我提交代码的简化版本：

$('#imageJSON').val(JSON.stringify(myCanvas)); //I wrote other JSON stringify code. It works
var d = myCanvas.toDataURL();
$('#imageData').val(d);
$('#myForm').submit();

Safari开始提交，但在提交中崩溃了几秒钟。服务器使用请求获取其他数据，但imageData未完成。我尝试将表单enctype更改为“multipart / form-data”，但这没有帮助。

Answer 1

事实证明，WebKit for Mac中存在内存错误。我将错误提交到了webkit.org https://bugs.webkit.org/show_bug.cgi?id=84168。我发现另一种解决方案是通过AJAX而不是标准表单提交来发送数据。

$('#imageJSON').val(JSON.stringify(myCanvas)); 
var d = myCanvas.toDataURL();
$('#imageData').val(d);
var data = $(form).serialize();
$.post(ajaxurl, data, function(r) {
    // done. handle response. remove loading overlay.
});

工作得很好，但这有点痛苦。我使用javascript（代码未显示）在表单提交后将浏览器定向到适当的页面，它有点模拟标准表单提交，但它对用户来说并不顺利。

Answer 2

你是否尝试过编写一个算法来将画布图像分解成块？例如，不是在整个画布上调用toDataURL（），而是将画布分成10-20个不同的部分。将每件作为自己的单独图像保存。加载画布时，只需将每个部分组装到画布上即可。这与数据包或视频缓冲的概念类似。

iOS Safari崩溃与大型帖子数据表单提交

2 个答案: