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 whereMonth and whereYear Example
Laravel whereMonth and whereYe...

In this article, we will show you laravel whereMonth and whereYear examples. whereMonth and whereYear are...

Read More

Jan-25-2021

How to Get Soft Deleted Records in Laravel 10
How to Get Soft Deleted Record...

Hey there! Ever wondered how to recover deleted data in Laravel 10 without much hassle? Well, you're in luck! I'...

Read More

Nov-27-2023

Character Count In Textarea
Character Count In Textarea

In this article, we will explain to you how to count characters from textarea. many times a client has requirements...

Read More

Jul-08-2020

How To Check Password Strength Using JQuery
How To Check Password Strength...

In this article, we will see how to check password strength using jquery. here we will check whether password ...

Read More

Sep-04-2020