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
Laravel 8 Datatables Filter with Dropdown
Laravel 8 Datatables Filter wi...

In this example we will see laravel 8 datatables filter with dropdown, Here we will add datatables custom...

Read More

Jun-16-2021

Laravel 8 Add Watermark on Image
Laravel 8 Add Watermark on Ima...

In this post we will learn how to add watermark on image in laravel 8. here we will see example of laravel 8 add waterma...

Read More

Jun-23-2021

How To Install php-zip Extension In Ubuntu
How To Install php-zip Extensi...

In this article, I will guide you through the process of installing the php-zip extension on Ubuntu. The php-zip extensi...

Read More

Jul-14-2023

How to Send Bulk Mail Using Queue in Laravel 9
How to Send Bulk Mail Using Qu...

In this article, we will see how to send bulk mail using queue in laravel 9. Laravel queue is used for sending bulk...

Read More

Mar-15-2022