Base64 Images

by dimaslanjaka

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/css/mdb.min.css" rel="stylesheet">

<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<form id="file-form" method="POST">
	<div class="form-group">
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="file-select" aria-describedby="inputGroupFileAddon01" accept="image/*" onchange="readAndShowFiles();" multiple>
    <label class="custom-file-label" for="file-select">Choose file</label>
  </div>
		</div>
</div>
</form>
	</div><div class="col-lg-6">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Channel Responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7975270895217217"
     data-ad-slot="2600604346"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<textarea id="output" class="form-control" placeholder="your base64 image file, output in here"></textarea>
	</div></div>
</div>

<div id="list"></div>

JavaScript

console.clear()
var imgsrcs = ["https://i.imgur.com/gwlPu.jpg", "https://i.imgur.com/PWSOy.jpg", "https://i.imgur.com/6l6v2.png"];
createImageArray(imgsrcs);

function createImageArray(imgsrcs){
	for (var i = 0; i < imgsrcs.length; i++) {
		createImage(imgsrcs[i]);
	}
}

function createImage(src){
	var oImg = document.createElement("img");
	oImg.setAttribute('src', src);
	oImg.setAttribute('alt', 'na');
	oImg.setAttribute('height', '100px');
	oImg.setAttribute('width', '100px');
	document.body.appendChild(oImg);
}

// from http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

function readFile(filePath){
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    f = fso.GetFile(filePath);
    var textStream = f.OpenAsTextStream();
    var fileData = base64Encode(textStream.Read(f.size));
    textStream.close();

    return fileData;
}

function IE_getImage() {
    var filePath = document.getElementById("file-select").value;
    var fileData =...