FileReader Image to Base64 Corrupted Conversion

I am trying to convert an image from my local files to Base64 by JavaSctipt.
For example please look at this website.

When I browse a picture on the input beneath Local File* heading (input having id #form-base64-converter-encode-image-file) and then run this code in the console of the browser -

function getBase64(file) {   var reader = new window.FileReader();   reader.readAsDataURL(file);   reader.onload = function () {    alert(reader.result);   };   reader.onerror = function (error) {     alert('Error: ', error);   };}var file = window.document.querySelector('#form-base64-converter-encode-image-file').files[0];getBase64(file);

The script gives me a long string which is supposed to be the Base64 encoded image. But when I assign the string in the source of an image the image won't show up. The string is corrupted or not properly Base64 encoded. What do I need to do for a proper Base64 string which I can then assign in src attribute of an <image> tag?