Не удается прикрепить конвертированный img base64 к img src, как исправить?

function log(msg){return console.info(msg); } function removeClass(el, _className = "active"){if (el){return hasClass(el, _className) ? el.classList.remove(_className) : true; } return false; } function hasClass(el, _className = "active"){if (el.classList.contains(_className)){return true; } else {return false; } return false; } function getElement(target, targetFrom=false){return targetFrom ? targetFrom.querySelector(target) : document.querySelector(target); } function getElements(target, targetFrom=false){return targetFrom ? [...targetFrom.querySelectorAll(target)] : [...document.querySelectorAll(target)]; } function getElementById(target, targetFrom=false){return targetFrom ? targetFrom.getElementById(target) : document.getElementById(target); } function addClass(el, _className = "active"){if (el){return !hasClass(el, _className) ? el.classList.add(_className) : true; } return false; } function getParent(el, idx){previouslyParent = el.parentElement; for (let index = 0; index < idx - 1; index++) {previouslyParent = previouslyParent.parentElement; } return previouslyParent; } function getOffset(el) {const rect = el.getBoundingClientRect(); return {"top": rect.top + window.scrollY, "left": rect.left + window.scrollX }; } function objectToTagStyles(selector, styles){if (styles){var style = document.createElement('style'); resonanceCssString = `${selector} {`; for (const [key, value] of Object.entries(styles)) {resonanceCssString += `${key}:${value};`; } resonanceCssString += "}"; if (style.styleSheet) {style.styleSheet.cssText = resonanceCssString; } else {style.appendChild(document.createTextNode(resonanceCssString)); } document.getElementsByTagName('head')[0].appendChild(style); return true; } return false; } function objectToCssTextStyles(styles){if (styles){resonanceCssString = ''; for (const [key, value] of Object.entries(styles)) {resonanceCssString += `${key}:${value};`; } return resonanceCssString; } return false; } function getAttribute(element, attr, isReturnValue){return isReturnValue ? element.attributes[attr].value : element.attributes[attr]; } function stringGen(yourNumber){var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < yourNumber; i++){text += possible.charAt(Math.floor(Math.random() * possible.length)); } return text; }


let base64String = "";
  
function imageUploaded() {
    var file = this['files'][0];
  
    var reader = new FileReader();
      
    reader.onload = function () {
        base64String = reader.result;
        imageBase64Stringsep = base64String;/*=====> 1.this executes after the imgTochange.src*/
        imgToChange.src = base64String;
        console.info(base64String);
    }


    imgToChange = getElement(`.change-this-image__${this.id}`);
        
    /*imgToChange.src = base64String;   =====> 1.this executes first,here base64String is empty*/ 

    reader.readAsDataURL(file);
    
    return base64String;
}




imgs = getElements('img');
svgs = getElements('svg');



getElement('body').style.position = 'relative';

for(let imageElement of imgs){

    newChangeImageWrapper = document.createElement("label");
    newChangeImageInput = document.createElement("input");

    addClass(newChangeImageWrapper, 'reverb-image-changer');

    randomNewWapperId = stringGen(10);
    randomNewInputId = stringGen(10);

    currentImgOffset = getOffset(imageElement);

    addClass(newChangeImageWrapper, `reverb-image-changer--id_${randomNewWapperId}`);
    newChangeImageWrapper.setAttribute("for", randomNewInputId);

    newChangeImageInput.setAttribute("id", randomNewInputId);
    newChangeImageInput.type = "file";

    newChangeImageInput.onchange = imageUploaded;
    
    newChangeImageWrapper.appendChild(newChangeImageInput)

    addClass(imageElement, `change-this-image__${randomNewInputId}`);

    currentImageBoundaries = imageElement.getBoundingClientRect();


    currentWrapperStyles = {
        "width": `${currentImageBoundaries.width}px`,
        "height": `${currentImageBoundaries.height}px`,
        "position": "fixed",
        "top": `${currentImageBoundaries.y}px`,
        "left": `${currentImageBoundaries.x}px`
    }


    newChangeImageWrapper.style.cssText = objectToCssTextStyles(currentWrapperStyles);

    getElement('body').appendChild(newChangeImageWrapper);

}

.reverb-image-changer{
    display: block;
    border: 1px solid transparent;
    text-align: center;
    color: white;
    cursor: pointer;
    margin-top: 0;
    transition: .3s;
    z-index: 999;
}

.reverb-image-changer:hover{

    border-color: rgb(46, 204, 113);
    cursor: pointer;
}

.reverb-image-changer input{
    
    width: 0px;
    height: 0px;
  visibility: hidden;
    position: absolute;
    top: 0;
    left: -100%;

}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <img src = "https://picsum.photos/200/300" alt = "" width = "200" height = "300">
    <img src = "https://picsum.photos/200/300" alt = "" width = "200" height = "300">
    <img src = "https://picsum.photos/200/300" alt = "" width = "200" height = "300">
    <img src = "https://picsum.photos/200/300" alt = "" width = "200" height = "300">
  
</body>
</html>