Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Image to Base64 Converter Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Image to Base64 Converter Tool in Blog - Post or Page.

What is Base64

Base64 is an encoding calculation that changes over any characters, double information, and even pictures or sound documents into a coherent string, which can be saved or moved over the organization without information misfortune. The characters created from Base64 encoding comprise of Latin letters, digits, in addition, and cut. Base64 is generally regularly utilized as a MIME (Multipurpose Internet Mail Extensions) move encoding for email.

Base64 pictures are fundamentally used to insert picture information inside different organizations like HTML, CSS, or JSON. By including picture information inside a HTML report, the program doesn't have to make an extra web solicitation to get the record, since the picture is as of now implanted in the HTML archive. A Base64 portrayal of a picture is bigger than a different picture and the string gets extremely long for enormous pictures. You ought to basically involve Base64 for little pictures and consistently test both inserted and outside pictures to see what works best.

How to Create

So, to create Image to Base64 Converter Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
• Save Theme

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/itsTSUI/tsP/toolBody.css'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

• After Save Theme
• Create a new Post or Page
• Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
• Publish

<div class="Tbody2">

<center>
  
<h4>Upload Image</h4>
<img id="Cimage">  
<b id="Cfiletext">No file choosen, yet.</b>
<input type="file" id="upload" hidden/>
<div class="Button">
<label for="upload" id="Uploadbutton" class="Uploadbutton"><i class="fa fa-upload"></i>Choose file</label>
</div>
<button onclick="convert();">Convert</button>
<h4>Base 64</h4>
<textarea id="base64" style="height: 200px; width: 100%;" placeholder="Get Base64 Here..." readonly>
</textarea>

</center>

</div>

<script>//<![CDATA[
var file,reader=new FileReader,rImg=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;function convert(){file=document.getElementById("upload").files[0],rImg.test(file.type)?(console.log(file.type+" :: "+file.name+" :: "+file.size),reader.readAsDataURL(file),document.getElementById("preview").style.display="block"):alert("You Must Select a Valid Image File!")}reader.onload=function(e){document.getElementById("base64").innerText=e.target.result};
//]]></script>

<script>
let uploadButton=document.getElementById("upload"),chosenImage=document.getElementById("Cimage"),fileName=document.getElementById("Cfiletext");uploadButton.onchange=(()=>{let e=new FileReader;e.readAsDataURL(uploadButton.files[0]),e.onload=(()=>{chosenImage.setAttribute("src",e.result)}),fileName.textContent=uploadButton.files[0].name});
</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.