javascript - FileReader readAsBinaryString() 到图像 DOM 元素

Question

如果有输入类型文件

<input id="file" type="file" name="file" />

和一张图片

<img id="img">

如果选择了一个文件，我想从图像中读取 Exif 数据并将其加载到 img 标签中。

var $inputFile = $("#file");

$inputFile.on("change", function() {
    var img = document.getElementById("img");
    var files = $inputFile[0].files;

    var reader = new FileReader()

    reader.onload = function(event) {
        var file = reader.result;

        // this is not working
        img.src = file;

        var binaryString = reader.result;
        var oFile = new BinaryFile(binaryString, 0, file.size);
        var exif  = EXIF.readFromBinaryFile(oFile);

        // read exif data
    }
    reader.readAsBinaryString(files[0]);
});

问题是我没有在屏幕上看到任何图像。它仅在我使用 reader.readAsDataURL(files[0]) 时显示；但这我不能使用，因为我需要 binaryString 作为 Exif 数据。

如何获取图像标签以显示所选的二进制字符串文件？

Answer 1

要以“二进制”形式显示图像，您需要将其作为 base62 编码字符串，又名“dataURL”。要使用它二进制并将其作为 src，你可以制作一个 ObjectURL .

var objectURL = URL.createObjectURL(blob);
image.src=objectURL;

为此您不需要 fileReader，但您需要 fileReader 来进行 exif 分析