Как обрабатывать большие файлы изображений при вводе файлов JavaScript

Question

У меня есть файл изображения для загрузки в мои приложения реакции.

image = размер: 28 МБ разрешение: 8xxx x 12xxx

onFileChange(e){
  const imageFile = e.target.files[0]
  const imageBase64 = fileToBase64(imageFile)
  let img = new Image()
  img.onload = () => {
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")

    // crop process ... (vanilla js)

    canvas.drawImage(...)
    return canvas.toDataURL()
  }
  img.src = imageBase64
}

мои приложения реакции всегда дают сбой, когда drawImage. иногда cra sh вкладка браузера

пробовала в: - macOS: chrome отображение «что-то пошло не так при отображении этой веб-страницы» - windows 10: chrome сбой при загрузке изображения и отображении черного изображения на холсте

или при любом размере ограничения для загрузки изображения в javascript / canvas / others?