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分析

FileReader readAsBinaryString（）到Image DOM元素

1 个答案: