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 Use JSON Data Field in MySQL Database
How to Use JSON Data Field in...

Today, In this post we will see how to use json field in mysql database. In this tutorial i will give mysql json data ty...

Read More

Jun-04-2021

How to Upload Multiple Image in Laravel 8
How to Upload Multiple Image i...

In this example we will see how to upload multiple image in laravel 8. here, we wil see tutorial of multiple image uploa...

Read More

Sep-17-2021

How To Generate QR Code Using Javascript
How To Generate QR Code Using...

In this tutorial we will see how to generate QR code using javascript. we will implement QR code generator without...

Read More

Jul-19-2021

Laravel 10 Create AJAX Pagination Example
Laravel 10 Create AJAX Paginat...

In this article, we will see laravel 10 create an ajax pagination example. Here, we will learn about how to create...

Read More

Apr-17-2023