how to display a dropped image file in browser on a canvas or as a HtmlImageElement ()

i actually wondering why the only way of doing this is taking the binary data from the file, base64-encode it and then feed this encoded String into an Tag / HtmlImageElement

Either as plain HTML

<img src="data:image/jpeg;base64,xxxxxxxxxxxxx...">

or via javascript

let reader = new FileReader();
reader.readAsDataURL( droppedFile ); // this converts the binary data from the file into base64
reader.onloadend = () => {
    const img = new Image();
    img.src = reader.result;
    img.onloadend = () => { 
        console.log(`image ${droppedFile.name} loaded.`);
    }  
}

A weird performance: Data is base64-encoded, which turns an 1MB Image into 1.33MB String (this really takes time), then placed inside the Image Element, just to be decoded again (which again takes time) to be displayed …

Why is that?

There is really no way to use TypedArray’s (UInt8Arrays) instead?

And where exactly does the browser check for the file type and retrieves width and height of lets say a dropped jpg file?