이미지를 FileReader에로드하십시오.

Question

해당 이미지의 데이터 URL을 얻기 위해 URL의 이미지를 filereader에로드하고 싶습니다. Google에서 솔루션을 검색하려고했지만 로컬 컴퓨터의 파일 입력에서 읽을 수있는 솔루션 만 찾을 수 있습니다.

Answer 1

이미지의 사용 가능한 데이터 URI 표현을 원하면 <img> 태그에 이미지를로드하고 <canvas>에 그 다음 캔버스의 .toDataURL() 메소드를 사용하십시오.

그렇지 않은 경우 이미지 blob을 가져 오려면 XMLHttpRequest을 사용해야합니다 (XMLHttpRequest 인스턴스에서 responseType 속성을 설정하고 .response 속성에서 blob 가져 오기). 그런 다음 보통 때와 마찬가지로 FileReader API를 사용할 수 있습니다.

두 경우 모두 이미지를 동일한 출처에서 호스팅해야하거나 CORS를 사용하도록 설정해야합니다.

서버에서 CORS를 지원하지 않는 경우 CORS 헤더를 추가하는 프록시를 사용할 수 있습니다. 다음 예제에서는 두 번째 방법을 사용하여 CORS Anywhere을 사용하여 원하는 이미지에 CORS 헤더를 가져옵니다.

var x = new XMLHttpRequest(); 
x.open('GET', '//cors-anywhere.herokuapp.com/http://www.youtube.com/favicon.ico'); 
x.responseType = 'blob'; 
x.onload = function() { 
    var blob = x.response; 
    var fr = new FileReader(); 
    fr.onloadend = function() { 
     var dataUrl = fr.result; 
     // Paint image, as a proof of concept 
     var img = document.createElement('img'); 
     img.src = dataUrl; 
     document.body.appendChild(img); 
    }; 
    fr.readAsDataURL(blob); 
}; 
x.send(); 

이전 코드는 콘솔에 복사하여 붙여 넣을 수 있으며 페이지 하단에 YouTube의 favicon이있는 작은 이미지가 표시됩니다. 데모 링크 : http://jsfiddle.net/4Y7VP/