Here’s a guide to help you convert images to Base64 using JavaScript. This technique is useful for embedding images directly into HTML or CSS, reducing HTTP requests and simplifying data handling. Base64 encoding represents binary data, like images, in an ASCII string format. This allows you to transmit images as part of the text, which is beneficial in various scenarios like email attachments or storing images in databases. This tutorial will walk you through the process of creating a simple tool to achieve this.
Setting Up the HTML Structure
The first step is to define the basic HTML structure for our image-to-Base64 converter. This includes a file input field for users to select an image and a designated area to display the converted Base64 string and the image itself.
<div class='kepala-base'> IMAGE<span> BASE64 CONVERTER</span></div>
<div class='wrapper'>
<br />
<input type="file" id="files" class="inputFile" name="files[]" />
</div>
<!-- lightbox -->
<div class="overlay">
<a href="#" class="close_overlay">x</a>
<div class="output"></div>
<br />
</div>
<script src="./script.js"></script>
Styling the Page with CSS
Next, we need to style our HTML elements to make the page visually appealing and user-friendly. The following CSS code provides a basic styling for the file input, the output area, and the overlay.
/* = body
----------------------------*/
html,body{
background:#fff;
position:relative;
height:100%;
margin:40px;
}
span{
color:#fff;
}
.kepala-base{
width:95%;
background:#555;
border:2px solid #555;
color:#fff;
padding:20px 30px;
text-align:center;
font-size:20px;
}
.wrapper{
background:#454851;
border:2px solid #555;
border-radius: 0px 0 3px 3px;
padding:30px 30px;
display: block;
margin: 0;
width: 95%;
height:200px;
text-align: center;
}
/* = input file
----------------------------*/
.inputFile {
background:transparent;
color: transparent;
outline:none;
cursor:pointer;
display:block;
margin:0 auto;
}
.inputFile::-webkit-file-upload-button {
visibility: hidden;
}
.inputFile::before {
content: 'Select File';
margin: 10px;
color: #000;
display: inline-block;
background: #fff;
padding: 5px;
width: 100px;
height: 48px;
line-height: 40px;
text-align: center;
text-decoration:none;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-family: 'Oswald', 'sans-serif';
font-weight: 300;
font-size: 20px;
border-radius: 2px;
transition:all 0.2s ease;
}
.inputFile:hover::before {
color: #eee;
transition:all 0.2s ease;
}
.inputFile:active {
outline: 0;
}
.inputFile:active::before {
color: #FFF;
}
input:focus,input:hover{background:#454851}
.btn{
margin:5px;
color: #FFF;
display: inline-block;
background: #757D75;
padding: 10px 14px;
text-align: center;
text-decoration:none;
outline: none;
white-space: nowrap;
cursor: pointer;
font-family: 'Oswald', 'sans-serif';
font-weight: 300;
font-size: 20px;
border-radius: 2px;
transition:all 0.2s ease;
}
.btn:hover{
background: #4A6266;
color: #fafafa;
transition:all 0.2s ease;
}
/* = lightbox
----------------------------*/
.overlay{
position: fixed;
top: 0;
left: 0;
padding: 0;
margin: 0;
opacity: 0;
visibility: hidden;
width: 100%;
height:199%;
background:#757D75;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.close_overlay {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
text-decoration: none;
font-size: 40px;
width: 50px;
height: 50px;
line-height: 45px;
background:#F46B63;
color:#fafafa;
transition: all 0.5s ease;
}
.close_overlay:hover{
background: #4A6266;
color: #fafafa;
transition:all 0.5s ease;
}
.show{
background:#6C7767;
opacity: 1;
visibility: visible;
z-index: 999999999;
}
.output {
background:#8BA987;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 5% auto;
padding: 1em;
width: 600px;
height: 500px;
overflow:auto;
}
.output ul {
width: 100%;
list-style: none;
margin: 0;
padding: 3px;
display: block;
color: #000;
font-size: 13px;
}
.output ul b{
color: #000;
}
.textarea {
overflow: auto;
width: 100%;
height: 200px;
margin: auto;
margin-bottom:16px;
display: block;
border: 1px solid #ecf0f1;
background: #ecf0f1;
color: #7f8c8d;
font-size:13px;
font-family:monospace,sans-serif;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
white-space: pre\9;
}
.thumb {
display: block;
width: 50%;
height: auto;
margin: 10px auto;
box-shadow: 0 6px 6px -6px #000;
}
Implementing the JavaScript Logic
This part is the core of the converter. The JavaScript code handles the file selection, reads the image file, converts it to Base64 format, and displays the result.
var img2data = (function() {
'use strict';
return {
// this.qS(foo)
qS: function(el) {
return document.querySelector(el);
},
run: function() {
this.convert();
},
convert: function() {
// vars
var fls = this.qS('#files'),
output = this.qS('.output'),
overlay = this.qS('.overlay'),
close_overlay = this.qS('.close_overlay');
fls.addEventListener('change', function(e) {
var file = fls.files[0],
txtType = /text.*/, // all text files
imgType = /image.*/, // all image files
fR = new FileReader(); // fileReader start
fR.onload = function(e) {
// if text
if (file.type.match(txtType)) {
var rS = fR.result,
// template
render = '<a class="btn" href="'+rS+'" target="blank">Output</a><ul>'+
'<li><b>Name: </b> '+file.name+'</li>'+
'<li><b>Size: </b> '+file.size+'</li>'+
'<li><b>Type: </b> '+file.type+'</li>'+
'<li><b>Data uri: </b></li>'+
'</ul>'+
'<pre class="textarea">'+rS+'</pre>';
output.innerHTML = render;
// if image
} else if(file.type.match(imgType)) {
var rS2 = fR.result,
// template
tmpl = '<a class="btn" href="'+rS2+'" target="blank">Output</a>'+
'<img class="thumb" src="'+rS2+'" alt="'+file.name+'"><ul>'+
'<li><b>Name: </b> '+file.name+'</li>'+
'<li><b>Size: </b> '+file.size+'</li>'+
'<li><b>Type: </b> '+file.type+'</li>'+
'<li><b>Data uri: </b></li>'+
'</ul>'+
'<pre class="textarea">'+rS2+'</pre>';
output.innerHTML = tmpl;
// if not support
}else{
output.innerHTML = '<h1>Maaf file yang anda upload tidak mendukung</h1>';
}
};
// on loaded add events
fR.onloadend = function(e) {
overlay.classList.add('show'); // add class
close_overlay.onclick = function(){
overlay.classList.remove('show'); // remove class
fls.value = ''; // remove files
};
};
// convert to data uri
fR.readAsDataURL(file);
});
}
};
})();
img2data.run();
Adding Header Assets
Include any necessary CDN links or other header assets.
Adding Footer Assets
Include any necessary CDN links or other header assets.
In conclusion, this tutorial has provided you with a step-by-step guide on how to create a tool to convert images to Base64 using Javascript, enabling you to embed images directly within your code.
