JSFiddle - React, Tailwind, and code Playground
HTML
<div style="background-color: black">
<img id="teste" />
</div>
<button id="btnLoad">load img</button>
JavaScript
var img = document.querySelector("#teste");
var btnLoad = document.querySelector("#btnLoad");
function buscarImagem() {
var oReq = new XMLHttpRequest();
oReq.open("GET", "http://fiddle.jshell.net/img/logo.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
var binaryString = '';
if (arrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteArray.byteLength; i++) {
alert('i = ' + byteArray.byteLength);
binaryString += String.fromCharCode(byteArray[i]); //extracting the bytes
}
var base64 = window.btoa(binaryString); //creating base64 string
img.src = "data:image/png;base64," + base64; //creating a base64 uri
}
};
oReq.send(null);
}
btnLoad.onclick = buscarImagem;