如何从用户输入图片文件然后base64编码成javascript？

Question

我试图将图像作为用户输入的文件并将其显示为 base64 编码的字符串。这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Convert Image to Base64 String</title>
</head>
<body>

    <input type="file" name="upload" id="file" accept="image/*">
    <br>
    <br>    
    <button type="button" onclick="showResult()">Show Source</button>
    <div id="image-source">Image Source :</div>
    <br>
    <div>Data URL:</div>
    <div id="result"></div>
    <script type="text/javascript">
        function toDataURL(src, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.onload = function() {
                var fileReader = new FileReader();
                fileReader.onloadend = function() {
                    callback(fileReader.result);
                }
                fileReader.readAsDataURL(xhttp.response);
            };

            xhttp.responseType = 'blob';
            xhttp.open('GET', src, true);
            xhttp.send();
        }



        showResult(){
            var x = document.getElementById("file").value;
            document.getElementById("image-source").innerHTML = x;
            toDataURL(x, function(dataURL) {
            // do something with dataURL
            document.getElementById('result').innerHTML = dataURL;
        });
        }


    </script>

</body>
</html>

我需要单独存储图像源来编码吗？有没有更简单的方法来对用户上传的图片进行编码？？

Answer 1

这是一个简单的示例，它转换使用文件浏览按钮选择的第一张图像。选择图像后，文件读取发生在客户端。文件读取是异步的所以我承诺了文件读取功能：

"use strict";

const fileDataURL = file => new Promise((resolve,reject) => {
    let fr = new FileReader();
    fr.onload = () => resolve( fr.result);
    fr.onerror = reject;
    fr.readAsDataURL( file)
});

function showResult(file) {
    fileDataURL( file)
    .then( data => (document.getElementById("result").textContent = data))
    .catch(err => console.log(err));
}

#result {
   width: 80%;
   font-family: monospace;
   overflow-wrap: break-word;
}

<p>
<input type="file" onchange="showResult( this.files[0]);" accept="image/*">
<div>Data URL:</div>
<div id="result"></div>

如何从用户输入图片文件然后base64编码成javascript？

How to input image file from user and then base64 encode it in javascript?

html

javascript

base64