이미지 미리보기 (createObjectURL vs FileReader)

[SeonHyungJo]

웹에서 많이 사용되는 기능으로 이미지 미리보기가 있다.

이미지 미리보기를 구현하는 방법은 크게 2가지로 나눌 수 있다.

URL.createObjectURL, URL.revokeObjectURL

inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
});

URL.revokeObjectURL(imgElement.src)

FileReader.readAsDataURL

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

비교한 글 살펴보기

1) time

• createObjectURL is synchronously executed (immediately)
• FileReader.readAsDataURL is asynchronously executed (after some time)

2) memory usage

• createObjectURL returns url with hash, and store object in memory until document triggers unload event (e.g. document close) or execute revokeObjectURL
• FileReader.readAsDataURL returns base64 that contains many characters, and use more memory than blob url, but removes from memory when you don't use it (by garbage collector)

3) support

createObjectURL from IE 10 and all modern browsers
FileReader.readAsDataURL from IE 10 and all modern browsers

결론적으로 BLOB 방식의 createObjectURL가 더욱 빠르며 많은 이미지를 보여주어야하는 경우 메모리 해제를 해주어야 한다.

Reference

• MDN - createObjectURL
• MDN - revokeObjectURL