如何使用 JavaScript 将图像转换为 base64字符串？

方法 ：

• 在这里，我们将创建一个包含 JavaScript 代码的 gfg.js 文件和一个 gfg.html 文件。
• 现在我们将onchange放在输入类型上，这将在您上传图像时执行一个函数imageUploaded() 。
• 现在我们将使用文件阅读器并在文件阅读器中使用 onload 事件，而不是获取图像 url，我们需要删除一些文本以获取 base64字符串并存储在名为 base64String 的变量中并在控制台上打印。
• 如果你想使用这个 base64，你可以在按钮点击上编写逻辑，就像这里我们会提醒这个 base64 字符串。

HTML

  

    

  

    
    
  
    
        Display String
    

  

Javascript

let base64String = "";
  
function imageUploaded() {
    var file = document.querySelector(
        'input[type=file]')['files'][0];
  
    var reader = new FileReader();
    console.log("next");
      
    reader.onload = function () {
        base64String = reader.result.replace("data:", "")
            .replace(/^.+,/, "");
  
        imageBase64Stringsep = base64String;
  
        // alert(imageBase64Stringsep);
        console.log(base64String);
    }
    reader.readAsDataURL(file);
}
  
function displayString() {
    console.log("Base64String about to be printed");
    alert(base64String);
}

输出：