This tutorial video help you to convert the image to base64 with JavaScript. You can convert your images to base64 using simple JavaScript.
Image to base64 convert using JavaScript
Video tutorial of Image to base64 converter using JavaScript
By watching this video you can convert the image to base64 with JavaScript. This video is very good if you want to convert images to base64.
Image to base64 converter using JavaScript [Source Codes]
This source code can help you to create Image to base64 converter using JavaScript
You can also download this source code through the given link. Click here to download source code
Copy
Copy
*,*:after,*:before{
-webkit-box-shadow: border-box;
-moz-box-shadow: border-box;
-ms-box-shadow: border-box;
box-shadow: border-box;
}
body{
margin:0;
}
header{
background: #09393e;
background-size: cover;
background-repeat: no-repeat;
height: 50px;
}
.logo{
color: #fff;
font-size: 22px;
float: left;
text-transform: capitalize;
}
.logo a{
color: #fff;
}
.body-container{
height: calc(100vh - 65px);
padding: 30px 0;
overflow: auto;
}
footer{
background: #09393e;
background-size: cover;
height: 15px;
background-repeat: no-repeat;
}
h1{
margin: 0 0 30px;
color: #484545
}
.dase64_text_wrap{
position: relative;
}
#dase64_text_copy,
#dase64_text_copy2{
/*position: absolute;
right: 2px;
top: 2px;*/
float: right;
z-index: 5;
padding: 3px 10px 6px;
background:#eee;
line-height: 1.4;
cursor: pointer;
transition: all 0.3s ease-in-out;
width: 110px;
text-align: center;
}
#dase64_text_copy:hover,
#dase64_text_copy2:hover{
background:lightgray;
}
#dase64_text,
#dase64_text2{
height: 100px;
width: 100%;
resize: none;
padding:15px;
margin: 0 0 30px;
border:2px solid lightgray;
}
.drag_drop_box{
position: relative;
margin: 0 0 30px;
background:#eee;
border:4px dashed #a49a9a;
}
.drag_drop_text{
width: calc(100% - 200px);
float: left;
padding: 5px 25px;
text-align: center;
text-transform: capitalize;
font-size: 24px;
}
.input_type_file{
position: relative;
overflow: hidden;
padding:10px 50px;
background: lightgray;
font-size: 24px;
font-weight: 500;
text-align: center;
width: 200px;
float: left;
pointer-events: none;
}
#inputFileToLoad{
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#dase64_img{
float: left;
max-width: 200px;
max-height: 100px;
margin-bottom: 30px;
}
#dase64_img img{
max-width: 100%;
max-height: inherit;
}
Copy
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
var cssBG = "url('"+srcData+"')"
document.getElementById("dase64_img").innerHTML = newImage.outerHTML;
document.getElementById("dase64_text").innerHTML = srcData;
document.getElementById("dase64_text2").innerHTML = cssBG;
}
fileReader.readAsDataURL(fileToLoad);
}
}
var inputFileToLoad = document.getElementById("inputFileToLoad");
inputFileToLoad.addEventListener("change", function(){
encodeImageFileAsURL()
});
function dase64TextCopy() {
var copyText = document.getElementById("dase64_text");
copyText.select();
copyText.setSelectionRange(0, 9999999999)
document.execCommand("copy");
}
var copyText = document.getElementById("dase64_text_copy");
copyText.addEventListener("click", function(){
dase64TextCopy()
});
function dase64TextCopy2() {
var copyText2 = document.getElementById("dase64_text2");
copyText2.select();
copyText2.setSelectionRange(0, 9999999999)
document.execCommand("copy");
}
var copyText2 = document.getElementById("dase64_text_copy2");
copyText2.addEventListener("click", function(){
dase64TextCopy2()
});