如何将图像从图像源转换为 Base64 字符串？

Question

我从 How can I convert an image into Base64 string using JavaScript? 中找到了一些与该主题相关的答案。我意识到他们在 div 标签上没有图片。有没有图源可以吗？

为想要参考的人添加了答案

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%;" />

我想用图片源加载图片，找出base 64，可以吗？除了使用 div 在无法自定义的地方创建 1 个图像。

Answer 1

我想你想这样做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);
  }
}

如何将图像从图像源转换为 Base64 字符串？

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

javascript

html

base64