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

在本文中，我们将使用JavaScript将图像转换为base64字符串。以下方法展示了使用JavaScript将图像转换为base64字符串的方法。

方法：

我们将创建一个名为gfg.js的文件，其中包含JavaScript代码和一个gfg.html文件。
现在我们将在输入类型上使用 onchange ，当您上传图像时，它将执行一个名为 imageUploaded() 的函数。
现在我们将使用文件阅读器，并使用文件阅读器中的 onload 事件，然后我们将获取图像URL，并需要删除一些文本以获取base64字符串，并将其存储在一个名为base64String的变量中，并在控制台上打印。
如果您想要使用这个base64字符串，您可以在按钮点击上编写逻辑，例如这里我们将弹出这个base64字符串。
示例： 此示例展示了上述解释的方法。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to convert image into base64 string using JavaScript ?
    </title>
</head>
 
<body>
    <input type="file" name="" id="fileId" onchange="imageUploaded()">
    <br><br>
 
    <button onclick="displayString()">
        Display String
    </button>
    <script>
        let base64String = "";
 
        function imageUploaded() {
            let file = document.querySelector(
                'input[type=file]')['files'][0];
 
            let 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);
        }
 
    </script>
</body>
</html>

输出：

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