什么会导致HTML5画布toBlob创建一个不完整的图像？

Question

我有以下javascript从画布生成图像并将它们上传到服务器.

var can = document.createElement('canvas');
can.width = 600;
can.height = 600;
var ctx = can.getContext('2d');
ctx.fillRect(0, 0, can.width, can.height);
ctx.fillText("Julia", can.width/2, can.height/2);
can.toBlob(uploadImage, "image/jpg", 0.9);

function uploadImage(jpeg) {
  var data = new FormData();
  data.append('image', jpeg, 'image.jpg');
  ...
}

每隔一段时间,结果看起来就像上面一样,只是部分绘制的.多个画布按顺序处理和上传,仅在完成ajax(在......部分)中继续进行,因此一次只能进行一次.

你看到过这种情况吗？如果是这样,我应该在这个过程中进一步调试？可能是上下文对象中的设置或其他内容？

编辑

上传是一个ajax帖子,只在成功分支上解析了一个promise.它实际上使用angular的$ http服务:

$http({method: 'POST', url: '...', data: data}).then(function(response) {
    // callback that processes and uploads the next image
});

Answer 1

我们面临着类似的情况，除了画布部分。您可以简单地调试它。

1. 将给定的 blob 作为 img src 打印到页面，以确保该文件已正确创建。还打印 blob 大小。
2. 打开浏览器的开发者工具->网络->过滤XHR并开始上传
3. 分配完成（状态200）ajax请求并查看请求标头->内容长度。如果该数字等于页面上的 blob 大小，则说明已正确上传并在服务器端发现问题。否则检查 ajax 调用。
4. 确保服务器已设置适合您的用例的最大客户端请求大小。例如nginx的默认值是1M。

提示：通过 $http 标头中的 blob.type 设置 Content-Type。POST 的默认值为 application/json。