概要
一度、FileReader.readAsArrayBufferで読み込んだ状態から画像表示用のDataURLを生成する。
FileReader.readAsArrayBuffer()で読み込んだバイナリデータをバイナリ文字列に変換してからbase64にエンコードする必要がある。
実装
JavaScript
/// Base64変換を小分けにする
const APPLY_MAX = 1024;
let encodedStr = "";
for (var i = 0; i < this.reader.result.byteLength; i += APPLY_MAX) {
encodedStr += String.fromCharCode.apply(null, new Uint8Array(this.reader.result.slice(i, i + APPLY_MAX)));
}
encodedData = window.btoa(encodedStr);
※reader.resultには、FileReader.readAsArrayBuffer()で読み込んだバイナリがある前提
HTML側
<img src={`data:image/*;base64,${encodedData}`} />
※Reactの実装になっているので適時読み替えること
NG実装
JavaScript
const str = String.fromCharCode.apply(null, new Uint8Array(reader.result));
encodedData = window.btoa(str); // base64へ
こちらだと、ファイルサイズ（reader.resultの配列のサイズ）が大きい場合に、applyで再起回数が限界を超えてエラーが出る。