"잡히지 않은 ReferenceError : blob이 정의되지 않았습니다"를 어떻게 해결할 수 있습니까? 이 같은

Question

데모 및 전체 코드 : 그것은 이미지를 표시 document.body.appendChild(img);를 사용

작동 https://jsfiddle.net/q93c7Lpf/

. 그리고 그 결과는 다음과 같습니다 :

<canvas width="660" height="1100" style="width: 600px; height: 1000px;"></canvas> 

태그 img로 변경하고 싶습니다. 그래서 파일 리더를 사용하고 싶습니다. 내가가보고, 내가 실행 한 후, loadImage(...) 후 코드를 추가

var dataURI; 
var reader = new FileReader(); 
reader.onload = function(){ 
    // here you'll call what to do with the base64 string result 
    dataURI = this.result; 
    console.log(dataURI); 
}; 
reader.readAsDataURL(blob); 

:이 코드를 추가

는 여기 html image blob to base64 및 Convert blob to base64

읽은 다음 나는

을 구현하려고 다음과 같은 콘솔이 존재합니다 :

Uncaught ReferenceError: blob is not defined

데모 및 전체 코드는 다음과 같습니다 : https://jsfiddle.net/q93c7Lpf/1/

이 문제를 어떻게 해결할 수 있습니까?

Answer 1

직접 파일 객체

document.getElementById('file-input').onchange = function (e) { 
    var dataURI; 
    var reader = new FileReader(); 
    reader.onload = function(){ 
    dataURI = this.result; 
    var image = new Image(); 
    image.src=dataURI; 
    document.body.appendChild(image); 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
}; 

이것이 당신이 찾고있는 무엇인가를 전달할 수 있습니다?