Encode Blob to Base64 in JavaScript
To encode a Blob object to Base64 in JavaScript you can use the FileReader.readAsDataURL() method. Below I provide a simple example which is supported by most popular browsers (Chrome 6+, Edge 12+, Firefox 3.6+, Internet Explorer 10+, Safari 6+).
// Create the Blob object (of course, it can be of any type and defined in any way)
var blob = new Blob(['Welcome to <b>base64.guru</b>!'], {type: 'text/html'});
// Define the FileReader which is able to read the contents of Blob
var reader = new FileReader();
// The magic always begins after the Blob is successfully loaded
reader.onload = function () {
// Since it contains the Data URI, we should remove the prefix and keep only Base64 string
var b64 = reader.result.replace(/^data:.+;base64,/, '');
console.log(b64); //-> "V2VsY29tZSB0byA8Yj5iYXNlNjQuZ3VydTwvYj4h"
// Decode the Base64 string and show result just to make sure that everything is OK
var html = atob(b64);
console.log(html); //-> "Welcome to <b>base64.guru</b>!"
};
// Since everything is set up, let’s read the Blob and store the result as Data URI
reader.readAsDataURL(blob);Another way to convert Blob to Base64 is to call reader.readAsBinaryString(blob) and use btoa(reader.result) to get the Base64 string. However, this method will most likely work slower and is not supported by Internet Explorer at all.
What is "aaaaigz0...my4xmda="?
Validate Base64 using Notepad++
Base64 encryption is a lie
Comments (14)
I hope you enjoy this discussion. In any case, I ask you to join it.
<input type="file" id="myFile">
<br>
<br>
<button onclick="myFunction()">PLAY</button>
<script>
function myFunction() {
// var x = document.getElementById("myFile").content;
var input = document.querySelector('myFile');
input.onchange = function () {
var file = input.files[0],
reader = new FileReader();
reader.onloadend = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
// console.log(b64);
};
reader.readAsDataURL(file);
};
let encoded = reader.readAsDataURL(file);
document.getElementById("demo").innerHTML = "<video width=\"320\" height=\"240\" controls>\
<source src=\"data:video/mp4;base64," + encoded + "\" type=\"video/mp4\" > </source>\
OOPS!\
</video>";
}
</script>
<div id="demo">
</div>
so here's a cup of coffee.
still would appreciate yr comments.
<Html>
<head>
<title>html5 video player</title>
</head>
<body>
<h3>play videos: filetype MP4</h3>
<input type="file" id="myFile">
<br>
<br>
<button onclick="myFunction()">PLAY</button>
<script>
function show_b64_video(encoded) {
document.getElementById("demo").innerHTML = "\
<video width=\"320\" height=\"240\" controls>\
<source src=\"data:video/mp4;base64," + encoded + "\" type=\"video/mp4\" > </source>\
OOPS!\
</video>";
}
function myFunction() {
var input = document.querySelector('#myFile');
console.log('input = ', input);
var file = input.files[0];
console.log('file = ', file);
var reader = new FileReader();
console.log('reader = ', reader);
reader.addEventListener("load", () => {
var encoded = reader.result.replace(/^data:.+;base64,/, '');
console.log('encoded = ', encoded);
show_b64_video(encoded);
}, false);
reader.readAsDataURL(file);
}
</script>
<div id="demo">
</div>
<h3>Powered by base64</h3>
</body>
</html>