How can I convert an image into Base64 string using JavaScript

Question

I need to convert my image to a Base64 string so that I can send my image to a server   Is there any JavaScript file for this  Else  how can I convert it

User · Answer

There are multiple approaches you can choose from:

1. Approach: FileReader

Load the image as blob via XMLHttpRequest and use the FileReader API (readAsDataURL()) to convert it to a dataURL:

_x000D_

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

_x000D_

This code example could also be implemented using the WHATWG fetch API:

_x000D_

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

_x000D_

These approaches:

lack in browser support

have better compression
work for other file types as well

Browser Support:

2. Approach: Canvas

Load the image into an Image-Object, paint it to a nontainted canvas and convert the canvas back to a dataURL.

_x000D_

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) {
    console.log('RESULT:', dataUrl)
  }
)

_x000D_

In detail

Supported input formats:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

Supported output formats:

image/png, image/jpeg, image/webp(chrome)

Browser Support:

http://caniuse.com/#feat=canvas
Internet Explorer 10 (Internet Explorer 10 just works with same origin images)

3. Approach: Images from the local file system

If you want to convert images from the users file system you need to take a different approach. Use the FileReader API:

_x000D_

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

_x000D_

<input type="file" onchange="encodeImageFileAsURL(this)" />

_x000D_

User · Answer

x000D   x000D  document querySelector  input   onchange   e   gt      const fr   new FileReader     fr onloadend        gt  document write fr result    fr readAsDataURL e target files 0     x000D   lt input type  file  gt  x000D   x000D   x000D

User · Answer

You can use the HTML5  lt canvas gt  for it   Create a canvas  load your image into it and then use toDataURL   to get the Base64 representation  actually  it s a data  URL  but it contains the Base64-encoded image

User · Answer

uploadProfile e         let file   e target files 0       let reader   new FileReader         reader onloadend   function             console log  RESULT   reader result            reader readAsDataURL file

User · Answer

You could use FileAPI  but it s pretty much unsupported

User · Answer

This snippet can convert your string  image and even video file to Base64 string data    x000D   x000D   lt input id  inputFileToLoad  type  file  onchange  encodeImageFileAsURL       gt  x000D   lt div id  imgTest  gt  lt  div gt  x000D   lt script type  text javascript  gt  x000D    function encodeImageFileAsURL     x000D   x000D      var filesSelected   document getElementById  inputFileToLoad   files  x000D      if  filesSelected length  gt  0    x000D        var fileToLoad   filesSelected 0   x000D   x000D        var fileReader   new FileReader    x000D   x000D        fileReader onload   function fileLoadedEvent    x000D          var srcData   fileLoadedEvent target result      lt --- data  base64 x000D   x000D          var newImage   document createElement  img    x000D          newImage src   srcData  x000D   x000D          document getElementById  imgTest   innerHTML   newImage outerHTML  x000D          alert  Converted Base64 version is     document getElementById  imgTest   innerHTML   x000D          console log  Converted Base64 version is     document getElementById  imgTest   innerHTML   x000D          x000D        fileReader readAsDataURL fileToLoad   x000D        x000D      x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Needed to leverage reader to convert blob to base64  prefer to use async-await syntax so I chose to extract reader logic into helper like this      Convert resBlob to base64 export const blobToData    blob  Blob    gt      return new Promise  resolve    gt        const reader   new FileReader       reader onloadend        gt  resolve reader result      reader readAsDataURL blob          and calling it using await in main code      Convert resBlob to dataUrl and resolve const resData   await blobToData resBlob

User · Answer

Here is what I did      Author James Harrington 2014 function base64 file  callback     var coolFile         function readerOnload e       var base64   btoa e target result       coolFile base64   base64      callback coolFile          var reader   new FileReader      reader onload   readerOnload     var file   file 0  files 0     coolFile filetype   file type    coolFile size   file size    coolFile filename   file name    reader readAsBinaryString file       And here is how you use it  base64     input type  file      function data     console log data base64

User · Answer

Basically  if your image is    lt img id  Img1  src  someurl  gt    then you can convert it like  var c   document createElement  canvas    var img   document getElementById  Img1    c height   img naturalHeight  c width   img naturalWidth  var ctx   c getContext  2d     ctx drawImage img  0  0  c width  c height   var base64String   c toDataURL

User · Answer

As far as I know  an image can be converted into a Base64 string either by FileReader   or storing it in the canvas element and then use toDataURL   to get the image  I had the similar kind of problem you can refer this   Convert an image to canvas that is already loaded

User · Answer

I ended up using a function that returns a Promise   x000D   x000D  const getImg64   async     gt      const convertImgToBase64URL    url    gt      console log url      return new Promise  resolve  reject    gt          const img   new Image          img crossOrigin    Anonymous         img onload        gt              let canvas   document createElement  CANVAS             const ctx   canvas getContext  2d             canvas height   img height            canvas width   img width            ctx drawImage img  0  0             const dataURL   canvas toDataURL              canvas   null            resolve dataURL                img src   url                 for the demonstration purposes I used proxy server to avoid cross origin error   const proxyUrl    https   cors-anywhere herokuapp com     const image   await convertImgToBase64URL proxyUrl  https   image shutterstock com image-vector vector-line-icon-hello-wave-260nw-1521867944 jpg     console log image    getImg64   x000D   x000D   x000D    You can use this approach in any async function  Then you can just await for the converted image and continue with instructions

User · Answer

Try this code   For a file upload change event  call this function       fileproof   on  change   function          readImage   this   done function  base64Data         lt   hfimgbs64 ClientID  gt    val base64Data            function readImage inputElement        var deferred     Deferred         var files   inputElement get 0  files       if  files  amp  amp  files 0             var fr   new FileReader            fr onload   function  e                deferred resolve e target result                      fr readAsDataURL files 0          else           deferred resolve undefined              return deferred promise        Store Base64 data in hidden filed to use

User · Answer

Well  if you are using Dojo Toolkit  it gives us a direct way to encode or decode into Base64   Try this   To encode an array of bytes using dojox encoding base64   var str   dojox encoding base64 encode myByteArray     To decode a Base64-encoded string   var bytes   dojox encoding base64 decode str

User · Answer

I found that the safest and reliable way to do it is to use FileReader    Demo  Image to Base64  lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  quot UTF-8 quot  gt     lt  head gt     lt body gt       lt input id  quot myinput quot  type  quot file quot  onchange  quot encode    quot    gt       lt div id  quot dummy quot  gt       lt  div gt       lt div gt         lt textarea style  quot width 100  height 500px  quot  id  quot txt quot  gt         lt  textarea gt       lt  div gt       lt script gt        function encode             var selectedfile   document getElementById  quot myinput quot   files          if  selectedfile length  gt  0              var imageFile   selectedfile 0             var fileReader   new FileReader              fileReader onload   function fileLoadedEvent                var srcData   fileLoadedEvent target result              var newImage   document createElement  img                newImage src   srcData              document getElementById  quot dummy quot   innerHTML   newImage outerHTML              document getElementById  quot txt quot   value   document getElementById  quot dummy quot   innerHTML                        fileReader readAsDataURL imageFile                          lt  script gt     lt  body gt   lt  html gt   UPDATE - THE SAME CODE WITH COMMENTS FOR  AnniekJ REQUEST   lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  quot UTF-8 quot  gt     lt  head gt     lt body gt       lt input id  quot myinput quot  type  quot file quot  onchange  quot encode    quot    gt       lt div id  quot dummy quot  gt       lt  div gt       lt div gt         lt textarea style  quot width 100  height 500px  quot  id  quot txt quot  gt         lt  textarea gt       lt  div gt       lt script gt        function encode                Get the file objects that was selected by the user from myinput - a file picker control         var selectedfile   document getElementById  quot myinput quot   files             Check that the user actually selected file s from the  quot file picker quot  control            Note - selectedfile is an array  hence we check it s length  when length of the array            is bigger than 0 than it means the array containes file objects         if  selectedfile length  gt  0                 Set the first file object inside the array to this variable              Note  if multiple files are selected we can itterate on all of the selectedfile array  using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected           var imageFile   selectedfile 0                Set a filereader object to asynchronously read the contents of files  or raw data buffers  stored on the            user s computer  using File or Blob objects to specify the file or data to read             var fileReader   new FileReader                 We declare an event of the fileReader class  onload event  and we register an anonimous function that will be executed when the event is raised  it is  quot trick quot  we preapare in order for the onload event to be raised after the last line of this code will be executed  fileReader readAsDataURL imageFile    - please read about events in javascript if you are not familiar with  quot Events quot             fileReader onload   function fileLoadedEvent                   AT THIS STAGE THE EVENT WAS RAISED                Here we are getting the file contents - basiccaly the base64 mapping             var srcData   fileLoadedEvent target result                 We create an image html element dinamically in order to display the image             var newImage   document createElement  img                   We set the source of the image we created             newImage src   srcData                 ANOTHER TRICK TO EXTRACT THE BASE64 STRING                We set the outer html of the new image to the div element             document getElementById  quot dummy quot   innerHTML   newImage outerHTML                 Then we take the inner html of the div and we have the base64 string             document getElementById  quot txt quot   value   document getElementById  quot dummy quot   innerHTML                           This line will raise the fileReader onload event - note we are passing the file object here as an argument to the function of the event             fileReader readAsDataURL imageFile                          lt  script gt     lt  body gt   lt  html gt

User · Answer

If you have a file object  this simple function will work   function getBase64  file  callback         const reader   new FileReader         reader addEventListener  load        gt  callback reader result         reader readAsDataURL file       Usage example   getBase64 fileObjectFromInput  function base64Data       console log  Base64 of file is   base64Data      Here you can have your code which uses Base64 for its operation     file to Base64 by oneshubh

User · Answer

Here is the way you can do with Javascript Promise  const getBase64    file    gt  new Promise function  resolve  reject        let reader   new FileReader        reader readAsDataURL file       reader onload        gt  resolve reader result      reader onerror    error    gt  reject  Error     error        Now  use it in event handler  const  changeImg    e    gt            const file   e target files 0           let encoded          getBase64 file             then  result    gt                encoded   result                           catch e   gt  console log e

[javascript] How can I convert an image into Base64 string using JavaScript?

1. Approach: FileReader

2. Approach: Canvas

3. Approach: Images from the local file system

Examples related to javascript

Examples related to base64