大きい画像の Data URI をそのまま <img> で読み込むと FireFox と Edge で失敗する

FireFox で大きい画像が表示されない？fileReader.readAsDataURL メソッドの注意点と解決策

FireFox で画像が表示されない問題に遭遇している方は、本記事が解決の手助けになることでしょう。特に、大きな画像を Data URI として読み込む際に発生する問題と、それを解決する方法に焦点を当てています。

問題の概要

fileReader.readAsDataURL メソッドの利用

以下の方法は、多くのブラウザでうまく機能しますが、FireFox での大きい画像の表示には問題があります。

参考コード

<input type="file" accept="image/*" onchange="loadFile1(event)" />
<img id="output1" />

var loadFile1 = function (event) {
  var reader = new FileReader();
  reader.onload = function () {
    var output = document.getElementById("output1");
    output.src = reader.result;
  };
  reader.readAsDataURL(event.target.files[0]);
};

このコードでは、FireFox では以下の問題が発生します。

• 約 25MB までのファイルサイズの画像のみが読み込まれる
• 大きい画像は<img>タグで表示できない

解決策

URL.createObjectURL メソッドの利用

大きい画像が表示されない問題に対して、以下の方法が効果的な解決策となります。

参考コード

<input type="file" accept="image/*" onchange="loadFile2(event)" />
<img id="output2" />

var loadFile2 = function (event) {
  var output = document.getElementById("output2");
  output.src = URL.createObjectURL(event.target.files[0]);
  output.onload = function () {
    URL.revokeObjectURL(output.src); // free memory
  };
};

動作確認サンプル

まとめ

fileReader.readAsDataURL メソッドを使用していて FireFox で大きい画像が表示されない場合、URL.createObjectURL メソッドの利用が効果的です。