2013年6月6日木曜日

FirefoxではWebWorker内でFileReaderが使えない(T_T)

ローカルファイルシステムから大きな画像を読み込む時に、FileReaderをWebWorker内で使ったらマルチプロセスになってマルチコアのシステムで有利なんじゃないか?と思い、やってみた。

WebWorker呼び出し側
function loadImage(file, callback) {

  //WebWorkerバージョン
  if (true) {
    var worker = new Worker("js/workerReadFileAsDataURL.js");
    worker.onmessage = function(evt) {
      var img = new Image();
      img.onload = function() {
        callback.call(this, img);
      };
      img.src = evt.data;
    };
    worker.postMessage(file);
  }

  //通常バージョン
  else {
    var reader = new FileReader();
    reader.onload = function(evt) {
      var img = new Image();
      img.onload = function() {
        callback.call(this, img);
      };
      img.src = evt.target.result;
    }
    reader.readAsDataURL(file);
  }

} //END loadImage()

WebWorker側
//WebWorker実行内容
onmessage = function(evt) {

  //ファイルをDataURLとして読み込み
  var reader = new FileReader();
  reader.onload = function(evt) {
    postMessage(evt.target.result);
  }
  reader.readAsDataURL(evt.data);

}

ChromeやSafariでは動く。しかし、Firefoxでは動かない。しっかりFileReaderが使えない旨エラーが出る。Operaでも動かないが、エラーが出ないのでハッキリは分からない。

こんな情報もあった。

In worker.js ://Firefox doesn't support FileReader inside WebWorkersI noticed th... | Hacker News

一方、どのブラウザでもWebWorkerを使わない通常バージョンは動く。

WebWorkerには色々な制限がある。例えば、WebWorker内からnavigatorやwindowやDOMオブジェクトを使えない。

連載:人気順に説明する初めてのHTML5開発:並列処理を実現!Web Workersを使いこなそう (1/2) - @IT

特にDOMオブジェクトであるcanvasにアクセス出来ないのが痛い。結構時間のかかるキャンバスの画像化canvas.toDataURL()が使えないことを意味するから・・・

一部のブラウザでしかWebWorker内でFileReaderが使えないということだけをとっても、「WebWorkerの用途はかなり限られるな」というのが正直なところだ。

もう少し制限を緩めてくれたらいいのに。。。