XMLHttpRequestで取得したHTML文書から画像を取得する方法は？

Question

外部Webページの最初のイメージを取得して表示したいと考えています。 XMLHttpRequestを使用してWebページからドキュメントを取得し、そのドキュメントの最初のイメージを検索して表示します。しかし、イメージは現れません。これは、ウェブページ/ウェブサイトではなく、クロームアプリのためのものです。ここに私のjavascriptがあります：

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パラメータは、取得するイメージのWebページのURLです。 indexは、Webページ上のすべての画像のリストに必要な画像のインデックスです。 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(); 
} 

注意書き！これはクロームアプリのためのもので、ウェブサイトではありません。