How To Convert Image Into Base64 String Using jQuery

In this article, 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. This is to ensure that the data remain intact without modification during transport. Base64 is a group of binary-to-text encoding schemes that represent binary data (more specifically, a sequence of 8-bit bytes) in sequences of 24 bits that can be represented by four 6-bit Base64 digits.

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 the image to base64 string jquery or convert the image to base64 string javascript.

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 - Techsolutionstuff</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 POSTS

FEATURE POSTS