Step 16: Add an
input event listener to
the file input, and add the following to your event listener function:
// create a FileReader object
let reader = new FileReader()
// call loadFile when the file is loaded into the browser
reader.addEventListener(`load`, loadFile)
// load the first file chosen into the browser
if (this.files[0]) {
reader.readAsDataURL(this.files[0])
}
Then put the following function in your code and modify accordingly:
function loadFile() {
// set the source of the image element to the chosen file
yourImageVariable.src = this.result
// once the new image loads, the drawImage function will automatically get called
// to center or resize the image, modify code in the drawImage function
}