如何使用createImageBitMap从被删除的文件中获取ImageData？

Question

因此，使用Chrome和Firefox中的新createImageBitmap we now have a way to turn image Blobs into ImageData，适合在画布中进行操作。这甚至适用于webworker，这意味着我们可以移动图像解码和预加载主线程。然而，虽然它对于获取的图像非常有用，但我很难找到一种理智的方法来使其与用户的droppped文件一起工作。理论上，由于createImageBitmap接受Blob作为其参数（among other things, like ImageData, or another ImageBitmap object.），因此它应该接受一个File（因为File是Blob的子类型）。然而，在实践中，我只是得到一个空白/黑色图像。奇怪的是，如果我将文件转换为dataURL然后＆＃34; fetch＆＃34;我可以将所有这些工作都解决。它。这是网络工程师的代码：

self.addEventListener('message', function(e) {
  var file = e.data;

  var reader = new FileReader();

  reader.onload = function(){ 
    fetch(reader.result)
      .then(response => response.blob())
      .then(blob => createImageBitmap(blob))
      .then(imageData=>{
        self.postMessage(imageData,[imageData]);
      }).catch( _ => {
        !console.log('worker error!', _);
        self.postMessage({error:'error'});
      });
  };

  reader.readAsDataURL(file);

}, false);

这很有效，但看起来令人难以置信，尤其是不必要地将文件图像读入dataURL的额外步骤。我觉得我必须错过一些将文件转换为Blob的明显方法（但是无法找到它的任何api，因为理论上文件已经是Blob了！）或者使用readAsArrayBuffer然后进行其他一些转换将它变成createImageBitmap可以使用的类型（最终目标，再次是获取ImageData类型）。