HTML5 FileWriter InvalidStateError答案

【问题标题】：HTML5 FileWriter InvalidStateErrorHTML5 FileWriter InvalidStateError
【发布时间】：2014-01-29 15:42:09
【问题描述】：

我正在使用canvas 元素将多个video 元素实时拼接在一起，效果很好。我还尝试获取canvas 数据并定期将其写入文件，以便在video 元素播放完毕后从原始帧文件中编码视频。

我有一个每隔 40 毫秒（给定 25 fps）在计时器间隔上调用的函数，大致如下所示（代码太多，无法完整粘贴）：

function saveFrame() {

  // code to copy from video elements to my canvas...
  // ...

  // Get the canvas image data and write it to a file
  var imgData = canvasContext.getImageData(0, 0,
                                           canvasElement.width,
                                           canvasElement.height);
  var b = new Blob([imgData], {type: 'application/octet-binary'});

  // Write the blob to a file I previously opened
  // fileWriter is a FileWriter that I obtained and saved previously
  fileWriter.write(b);
}

setInterval(function() {
              saveFrame();
            }, 40);

每次我点击fileWriter.write(blob) 语句时都会收到以下错误：

Uncaught InvalidStateError：依赖于缓存状态的操作在一个接口对象中，但状态已经改变，因为它是从磁盘读取。

这是时间问题吗？文件写入器 API 不能支持每 40 毫秒写入一次吗？

【问题讨论】：

我最终缓冲了我的图像并每 500 毫秒写入一次。它可以正常工作。

标签： javascript html file

【解决方案1】：

来自docs的方法写：

如果 readyState 是 WRITING，抛出 InvalidStateError 并终止这一系列的步骤。

所以你得到InvalidStateError 错误，因为你的fileWriter 仍然写入以前的数据。

尝试使用writeend事件和setTimeout：

function saveFrame() {
    var imgData = canvasContext.getImageData(0, 0,
        canvasElement.width,
        canvasElement.height);
    var b = new Blob([imgData], {
        type: 'application/octet-binary'
    });
    fileWriter.write(b);
}

fileWriter.writeend = function () {
    setTimeout(saveFrame, 40)
}

saveFrame();

【讨论】：