Good day developers today we are going to build Base64 Encode Images
As you know the HTML markup is mandatory for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.
The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
Save It As Base64 Encode Images/index.html :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>embed base64</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="head"></div>
<h1>embed base64</h1>
<h2>easy, client side base64 encoder</h2>
<div class="upload">
<div class="inner">
Click or drop a file here.
</div>
</div>
<br />
<div class="sub">★ <span><a href="">Online/offline app & help</a> ★ <a href="https://sayemtutorial.blogspot.com">Downloaded From</a></span> ★</div>
<section id="result" style="display:none;">
<textarea class="base64"></textarea>
</section>
<form>
<input type='file' id="image_input" style="display:none;"/></form>
<div class="foot"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
<script src="js/index.js"></script>
</body>
</html>Without CSS our this script (Base64 Encode Images) will never look taking. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.
So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.
The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
Save It As Base64 Encode Images/css/style.css :
@import url(https://fonts.googleapis.com/css?family=Roboto:400,200,300|Lily+Script+One);
body { background-color:#E3E6C8; font-family:Roboto, Helvetica, sans-serif; font-weight:300; padding:0; margin:0; position:absolute; left:0; right:0; top:0; bottom:0; }
h1 { font-size:82px; text-align: center; font-weight:300; padding-bottom:0; margin-bottom:0; font-family: 'Lily Script One', cursive; }
h2 { font-size:24px; text-align: center; font-weight:200; letter-spacing:3px; margin-top:2px; margin-bottom:2em; }
.upload { background-color: #dcc483; padding:8px; border-radius:10px; cursor: pointer; margin-bottom:3em; width:400px; margin:0 auto; }
.upload .inner { padding:24px; font-size:22px; border-radius:10px; border:4px dashed #B39C5D; text-align: center; font-weight:400; color:#A38E55;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out; }
.upload:hover .inner { color:#94804A; border-color:#94804A; }
.sub { display:block; text-align:center; }
div.sub a { color:#727554; text-decoration:none; }
div.sub a:hover { text-decoration:underline; }
div.sub span { font-weight: 200; font-size: 14px }
textarea { width:100%; height:140px; padding:8px; font-size:90%; font-family:Roboto; font-weight:300; background-color:#efefef; color:#343536; border:1px solid #bbb; border-radius:3px; outline-color: #E3E6C8; }
section { padding:2em; padding-bottom:4em; }
body, html, textarea, section {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.head, .foot { height:24px; position:absolute; top:0; left:0; right:0; background-color: #dcc483; padding:0px; }
.foot { top:auto; bottom:0; position:fixed; }
.head:before, .foot:before { content:" "; display:block; position:absolute; top:10px; left:0; right:0; border-bottom:4px dashed #B39C5D; }Preview
 |
To make this project (Base64 Encode Images) work properly for that we will use JavaScript.
So here is a JavaScript for our project (Base64 Encode Images) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.
The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.
Save It As Base64 Encode Images/js/index.js :
function readURL(input) {
if (input && input[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#result .base64").val( e.target.result )
$("#result").slideDown();
}
reader.readAsDataURL(input[0]);
}
}
$(document).ready(function(){
$("#image_input").change(function(){
readURL(this.files);
});
$(".upload").click(function(){
$("#image_input").click();
});
$(".upload").on('drop', function(e) {
e.preventDefault();
readURL(e.originalEvent.dataTransfer.files);
}).on('dragover', function(e){
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
$("textarea").focus(function() {
var $this = $(this);
$this.select();
$this.mouseup(function() {
$this.unbind("mouseup");
return false;
});
});
});I have added drag and drop functionality in this tool.
Ending :
So here we are, We have done and our project Base64 Encode Images is ready now you can save all the files as provided.Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.
- Base64 Encode Images
- css
- style.css
- js
- index.js
- index.html
- css
Download Project (Base64 Encode Images) File :
Base64 Encode Images.zip
Sayem Tutorial File Size 684B
If it doesn't download automatically, please click Download again. And if the link is broken, please report via the Contact Form page of this blog.
Post a Comment