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]); 时它才会显示但这我不能使用，因为我需要 Exif 数据的binaryString。

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

Answer 1

要以“二进制”形式显示图像，您需要将其作为 Base62 编码字符串，即“dataURL”。 要使用它的二进制文件并将其作为 src，您可以创建 ObjectURL .

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

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