How can I convert an image into Base64 string from an image source?

Question

I have found some answers related to the topic from How can I convert an image into Base64 string using JavaScript?. I realized they don't have an image on the div tag. Is it possible if I would have the image source?

Answer added for people who want to reference

function encodeImageFileAsURL() {

  var filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];

    var fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
      var srcData = fileLoadedEvent.target.result; // <--- data: base64

      var newImage = document.createElement('img');
      newImage.src = srcData;

        document.getElementById("output").src = newImage.src;
  alert("Converted Base64 version is " + document.getElementById("output").src);
  console.log("Converted Base64 version is " + document.getElementById("output").src);
    }
    fileReader.readAsDataURL(fileToLoad);
  }
}

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />

I would like to use the image source to load the image and find out the base 64. Is it possible? Besides using div to create 1 image out where it can't be customized.

Do you mean you have this structure: <div><img src="someUrl"></div> and you want to convert that image ? Then do const url = document.querySelector('img').getAttribute('src'); and use that URL in one of the solutions provided in your link. — Randy Casburn
– Randy Casburn, Commented Dec 24, 2021 at 13:59
yeap :) i wan to use the image and as well display the base 64 string — Flow
– Flow, Commented Dec 24, 2021 at 14:04

jps · Accepted Answer · 2021-12-24 15:55:34Z

1

I think you want to do this https://jsfiddle.net/samet19/yv9a4op8/

function encodeImageFileAsURL() {
  var filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) {
      var srcData = fileLoadedEvent.target.result; // <--- data: base64
      var newImage = document.createElement('img');
      newImage.src = srcData;
      document.getElementById("output").src = newImage.src;
    }
    fileReader.readAsDataURL(fileToLoad);
  }
}

edited Dec 24, 2021 at 15:55

jps

22.9k18 gold badges91 silver badges121 bronze badges

answered Dec 24, 2021 at 13:35

user13109964

Sign up to request clarification or add additional context in comments.

1 Comment

Flow Over a year ago

Yes i wan do that as well display a base 64 string data as well

Collectives™ on Stack Overflow

How can I convert an image into Base64 string from an image source?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related