使用xmlhttprequest獲取跨域PNG文件

不幸的是，我看到了很多類似的問題，但沒有看到特定於我的情況的答案。我沒有使用jQuery。除了最新的瀏覽器（特別是Chrome）我什麼都不關心。我正在尋找一種方法來加載從PNG或JPG文件的跨域訪存的JavaScript圖像。使用xmlhttprequest獲取跨域PNG文件

即我只是想做到這一點：

<pre> 
var img1 = new Image(); 
img1.addEventListener('load', function() { imageLoaded(canvas, context, this); }, false) 
img1.src = textureUrl; 
</pre>

它的偉大工程同一個域。然而，顯然這不會在請求頭中包含Origin標籤，所以即使我們已經成功地在服務器上設置了CORS頭，它也無法在跨域環境中工作。如果有一些簡單的事情，我可以做這個請求來包含這個頭文件，那很好。

但我收集我必須做的是使用XHR對資產進行異步獲取，獲取二進制數據，然後以某種方式將該數據推送到常規Image（）對象中。我相信我們已經成功地獲得了各種形式的數據（嘗試過陣列緩衝區和斑點），但沒有成功將它干擾到Image（）對象中。

例如：

<pre> 
var img3 = new Image(); 
var req = new window.XMLHttpRequest(); 
req.overrideMimeType('text/plain; charset=x-user-defined'); // seems to make no difference 
req.responseType = 'arraybuffer'; // no joy with arraybuffer or blob 
req.open("GET", textureUrl, true, "", ""); // async request allows CORS preflight exchange 

req.onreadystatechange = function (oEvent) { 
    if (req.readyState === 4) { 
    if (req.status === 200) { 
     alert("XHR worked"); 
     if(req.response) { 
      alert("resp text: " + req.response); // identifies response as arraybuffer or blob 
     } 

     // I believe this section is where I need the most help.

//變種base64Img = window.btoa（UNESCAPE（encodeURIComponent方法（req.responseText）））;

 var base64Img = window.btoa(unescape(encodeURIComponent(req.response))); 
     alert("b64: " + base64Img); // vaguely uu64ish, but truncated 
     var src = ""; 
     if(isPng == 1) { // just to indicate the src url is built differently for jpg. 
      alert("png"); 
      src = 'data:image/png;base64,' + base64Img; 
     } 

     .... 
     img3.src = src; // img3 loads fine if I just jam a same domain url here 

    <closing braces> 

</pre>

從我看過，並不清楚我需要重寫MIME類型，如果我arraybuffer指定，但它不是我清楚。

我得到的數據回來（沒有跨域錯誤，耶），它似乎是正確的大小，但我不相信我成功uu64編碼它，也沒有我干擾合適的數據網址到圖片。

同樣，我只需要這與最新的Chrome瀏覽器的工作，我想是因爲「純HTML5」越好，所以我不覺得，有必要與IE7工作等

我不知道req.response是否包含HTTP響應的第一行（即我是否有責任在對它進行編碼之前進行修剪...）

希望你能從我的眼睛中拉出羊毛！

在此先感謝。

來源

2012-11-06 user1005997

好吧，看起來像那裏是一個有關的文章在這裏畢竟。我上面的錯誤是： – user1005997

嘿，一行評論。 OK ..第一..很確定我不需要overridemimetype。將responsetype設置爲'arraybuffer'是好的，但返回的數組緩衝區是通過req.response訪問的，而不是req.responseText（duh）。最後，我使用了一些在此發佈的代碼（對於此評論太大）來對數據進行編碼並生成數據：用於設置圖像源的uri。那然後工作。XHR處理CORS預檢（設置請求源頭，這使得正確配置的服務器能夠返回跨域圖像而不會污損畫布）。 – user1005997

鏈接到相關文章？ – broofa

我在一段時間內遇到了同樣的問題。這就是你需要做什麼，使其工作：

對於ZIP/PNG等格式，你應該使用：

req.reponseType = 'arraybuffer';

棘手的事情是在arraybuffer的情況下，req.responseText不工作，而是使用req.response

var base64Img = window.btoa(unescape(encodeURIComponent(req.response)));

來源

2015-08-03 10:40:04

使用xmlhttprequest獲取跨域PNG文件

回答

相關問題