을 FileReader readAsBinaryString() DOM 요소

Question

입력 유형 파일

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

및 파일이 나는 이미지 부하에서 Exif 데이터를 읽으려면 선택하면 이미지

<img id="img"> 

이있는 경우 그것을 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; 

당신은 이것에 대한 파일 리더를 필요로하지 않는다, 그러나 당신은 내가 img.src = URL.createObjectURL (파일) 시도