5

我有一个 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”，但这没有帮助。

4

2 回答 2

3

事实证明，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（代码未显示）将浏览器定向到适当的页面，它有点模拟标准表单提交，但对用户来说并不那么流畅。

于 2012-05-02T17:34:06.497 回答
1

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

于 2012-04-24T19:37:47.667 回答