XMLHttpRequest로 검색된 HTML 문서에서 이미지를 가져 오는 방법은 무엇입니까?

Question

외부 웹 페이지의 첫 번째 이미지를 가져 와서 표시하고 싶습니다. XMLHttpRequest를 사용하여 웹 페이지에서 문서를 가져온 다음 해당 문서의 첫 번째 이미지를 검색 한 다음 표시합니다. 그러나 아무런 이미지도 나타나지 않습니다. 이것은 크롬 앱을위한 것이지 웹 페이지/웹 사이트를위한 것이 아닙니다. 여기 내 자바 스크립트입니다 :

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'https://ab.reddit.com/', true); 
xhr.responseType = 'document'; 
xhr.onload = function(e) { 
    var ext_doc = this.response; 
    var img_src = ext_doc.getElementsByTagName("img")[0]; 
    var img_html = document.querySelector('#TestImage2'); 
    img_html.src = img_src.src; 
}; 
xhr.send(); 

Answer 1

나는이 문제를 파악했습니다. 외부 HTML 문서에서 외부 이미지의 검색된 URL src에 이미지 src을 직접 설정할 수 없습니다. 새로 발견 된 이미지 scr url에 대해 또 다른 XMLHttpRequest를 보내고 blob로 가져와야합니다. 그런 다음 이미지 src를 window.URL.createObjectURL(this.response)으로 설정하십시오. this.response은 이미지 입방체입니다. 왜 이런 식으로해야하는지, 아마도 보안상의 이유로 확신 할 수 없습니다. 나는 또한 이것을 자신의 기능에 넣었다. pgURL 매개 변수는 검색 할 이미지의 웹 페이지 URL입니다. index은 웹 페이지의 모든 이미지 목록에서 원하는 이미지의 색인입니다. display은 변경할 이미지 html 요소입니다.

function getImage(pgURL, index, display) 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', pgURL, true); 
    xhr.responseType = 'document'; 
    xhr.onload = function(e) { 
    var doc = this.response; 
    var img_src = doc.getElementsByTagName("img")[index]; 
    var src = img_src.src; 
    //Have to make a new XMLHttpRequest for the image found because img sources cannot be directly set 
    var xhr2 = new XMLHttpRequest(); 
    xhr2.open('GET',src); 
    xhr2.responseType = 'blob'; //Must make blob object of retrieved image 
    xhr2.onload = function(e){ 
     display.src = window.URL.createObjectURL(this.response); //Finally set the src for the image 
    }; 
    xhr2.send(); 

    }; 
    xhr.send(); 
} 

알림! 이것은 크롬 앱을위한 것이지 웹 사이트가 아닙니다.