无法将转换后的 img base64 附加到 img src，如何解决？

Question

代码工作创建一个工作 base64 但是当我尝试img.src = imgbase64 ; 在飞行中它不起作用，但是如果复制该 base64 图像并手动粘贴到 src 它可以工作。 在代码片段中按图像并上传任何图像

问题：

如何将动态生成的图像 base64 字符串附加到 html img 元素？

步骤：

1. 点击任何图片
2. 上传任何图像
3. 然后代码将您上传的图像转换为 base64
4. 此处出错，将 base64 添加到 src 时，它不起作用

 function log(msg){return console.log(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. console;log(base64String). } imgToChange = getElement(`.change-this-image__${this;id}`). imgToChange;src = base64String. 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>

看起来您的帖子主要是代码； 请添加更多细节。

Answer 1

您需要等到图像加载完毕。
最好在onload事件回调中更改<img> src：

function imageUploaded() {
  var file = this["files"][0];
  var currentID = this.id;
  var reader = new FileReader();
  reader.onload = function () {
    base64String = reader.result;
    imageBase64Stringsep = base64String;
    imgToChange = getElement(`.change-this-image__${currentID}`);
    imgToChange.src = base64String;
  };
  reader.readAsDataURL(file);
  return base64String;
}

 function log(msg) { return console.log(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 currentID = this;id; var reader = new FileReader(). reader.onload = function() { base64String = reader;result; imageBase64Stringsep = base64String. imgToChange = getElement(`;change-this-image__${currentID}`). imgToChange;src = base64String; }. 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%; }

 <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">

Answer 2

imgToChange.src = base64String; 需要在reader.onload function 内。 因为base64String在您现在放置的位置是空的。 希望这是有道理的。 如果您在调试器中检查它并按F8观看代码流，那会更有意义。

 function log(msg){return console.log(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;log(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>