FileReader readAsBinaryString() to Image DOM Element

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]）时才会显示;但我不能使用，因为我需要 Exif 数据的二进制字符串。

如何让图像标签显示所选文件，该文件是二进制字符串？

Answer 1

要以"二进制"形式显示图像，您需要将其作为 base62 编码字符串，也称为"dataURL"。要使用它二进制并将其作为 src，您可以创建一个 ObjectURL。

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

您不需要FileReader，但您将需要FileReader进行exif分析