How To Convert Image Into Base64 String Using jQuery

Websolutionstuff | Jan-03-2022 | Categories : jQuery

In this example, we will see how to convert an image into a base64 string using jquery. Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII.

We will convert the image to a base64 string using jquery or javascript. To convert base64 to the string we are using FileReader() function and get the result from the file.

Let's see, convert image to base64 string jquery.

Example  1 : 

FileReader is used to read the contents of a Blob or File.

<!DOCTYPE html>
<html>
  <head>
    <title>How To Convert Image Into Base64 String Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
  <form>
    <input type="file" name="img" id="image">
    <button type="submit">Submit</button>
    <a id="base64Img" href=""></a>
  </form>
  </body>
  <script type="text/javascript">
    $('#image').on('change', function() {

      var img = element.files[0];
 	
      var reader = new FileReader();
 
      reader.onloadend = function() {
 
        $("#base64Img").attr("href",reader.result);
 
        $("#base64Img").text(reader.result);
      }

      reader.readAsDataURL(img);
    });
  </script>
</html>

 

 

Example 2 :

The createElement() method creates an Element Node with the specified name like button, canvas, etc. 

function base64Img(img) {
   
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');   
   canvas.width = img.width;
   canvas.height = img.height;   
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}

const img = document.querySelector('#image');
img.addEventListener('load', function (event) {
   const dataUrl = base64Img(event.currentTarget);
   alert(dataUrl);
});

 


You might also like :

Recommended Post
Featured Post
How To Remove Specific Item From Array In Javascript
How To Remove Specific Item Fr...

In this article, we will see how to remove a specific item from an array in javascript. We will use the indexOf() m...

Read More

Nov-03-2022

How To Hide Toolbar In Summernote Editor
How To Hide Toolbar In Summern...

In this small tutorial i will show you How To Hide Toolbar In Summernote Editor, many times customer's have req...

Read More

Sep-02-2020

How To Install TinyMCE Editor In Laravel
How To Install TinyMCE Editor...

In this article, I will give you an example of the TinyMCE editor, Tinymce editor is a rich-text open-source editor,&nbs...

Read More

Jun-18-2020

Bootstrap Daterangepicker Example
Bootstrap Daterangepicker Exam...

In this small tutorial i will show you how to implement bootstrap daterangepicker example, bootstrap date rang...

Read More

May-17-2021