📚
大きい画像の 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 メソッドの利用が効果的です。
Discussion