Base64 Image Encoder - Open Source Tool
close
Base64 Image Encoder - Open Source Tool

Base64 Image Encoder - Open Source Tool

Base64 Image Encoder - Open Source Tool

Once again I'm having one tool for you this tool will help you in base64 encode images. This is very useful tool to make your images encoded in base64 code.

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://www.softwebtuts.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>

The tools which I share with you are not always created by me sometimes I found these tools on internet and i share them with you.
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; }
The customisation of this base64 image encoder tool is very much interactive and beautiful. After applying CSS your tool will have some look you can see the preview below.

Preview:
This is a snapped preview of this Base64 Image Encoder Tool.
Base64 Image Encoder - Open Source Tool

So we have written HTML markup and customised it and now we will add some functionality in this project (Base64 Encode Images).

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;
  });
 });
});

Once again I always say that JavaScript is the important part of any online tool because without JavaScript our application will not know what it has to do.

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

Download Project (Base64 Encode Images) File :

Base64 Encode Images.zip
File Size 684 Bytes
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.
Thank you !
Disqus Codes

No comments

Notifications

Disqus Logo