javascript - How to handle large image files in file input JavaScript

Question

i have image file to upload into my react apps.

image =
size: 28mb
resolution: 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
}

my react apps always glitch when drawImage. sometimes crash the tab browser

tried in :
- macOS : chrome displaying "something went wrong while displaying this webpage"
- windows 10 : chrome glitch while load the image and displaying black image on canvas

or, any limit size for load image in javascript / canvas / others ?

标签： javascriptreactjsimagecanvas