我可以通過XDomainRequest正確讀取二進制數據嗎？

編輯：以dennmat的建議納入考慮，我已成功地簡化我的圖像採集腳本到使用Image()幾行：我可以通過XDomainRequest正確讀取二進制數據嗎？

window.onload = function(){ 
    var img; 
    capture_canvas   = document.createElement('canvas'); 
    capture_canvas.width = 1000; 
    capture_canvas.height = 1000; 
    document.documentElement.appendChild(capture_canvas); 
    img = new Image(); 
    img.crossOrigin = "Anonymous";   
    img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg"; 
    img.onload = function() { 
     var context, canvas_img; 
     context = capture_canvas.getContext('2d'); 
     context.drawImage(img, 0, 0, 255, 255); 
     canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height); 
    } 
}

儘管這適用於Chrome和Firefox，這並不適用於IE9。以下鏈接中提到的解決方案似乎不適用於這種情況。 Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

IE9支持Image()的cors功能嗎？

我遇到了一個小問題。

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/resources/images/sample/sample.png

上述圖像實際上是包含標準報頭的PNG文件，接着255個字節從255下降到0（兩次）。這個想法是看看Internet Explorer 9如何處理通過AJAX請求接收二進制數據。

所以，這是我的問題：我注意到，當我在客戶端上收到一個大於127的字節時，該值默認爲253.有沒有一種方法讓IE讀取正確的擴展字節值？

有幾件事情要注意的：

1）我們不使用任何類型的JavaScript框架。這是一個要求，我們只有在裸骨頭的情況下才能做到這一點。

2）這個實驗的目的是製作一個乾淨的方式來得到一個圖像，所以我可以把它放在畫布上而不會弄髒它。有時這些圖像來自我們外部託管的圖像服務器，有時它來自我們無法控制的另一臺主機。

下面附件是我的測試腳本：

var request; 
window.onload = function(){ 
    request = new XMLHttpRequest(); 
    if (window.XDomainRequest) { 
     request = new XDomainRequest(); 
    } 
    request.open('GET', 
     "http://www.shangalulu.com/get_resource_no_64.php?url= 
     http://www.shangalulu.com/resources/images/sample/sample.png", true); 
    request.onload = function() 
    { 
     var binary, i, response; 
     response = this.responseText; 
     binary = ""; 
     if (this.contentType) 
     { 
      document.documentElement.appendChild(
       document.createTextNode(this.contentType)); 
      document.documentElement.appendChild(document.createElement('br')); 
     } 
     for(i=0; i < response.length; i++) { 
      binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff); 
      document.documentElement.appendChild(document.createTextNode(binary)); 
      document.documentElement.appendChild(document.createElement('br')); 
     } 
    }; 
    request.send(); 
}

來源

2012-03-07 Axle

'Image（）'有什麼問題？請參閱以下示例：https：//developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat 2012-03-07 16:52:54

實際上，您將在腳下嘗試操縱，管理和繪製JS中的圖像數據，而無需使用內置的瀏覽器公用事業。這將是非常緩慢，你可能會遇到無數的問題，特別是一旦你進入透明度和旋轉。 – dennmat 2012-03-07 17:03:39

我一定錯過了上次看Image（）時的跨源支持。謝謝你的提示！至於拍攝我的腳，我不完全確定您的瀏覽器內置實用程序是什麼意思。我打算在這裏做的只是將一個簡單的圖像渲染到可以發送到服務器的畫布上。 – Axle 2012-03-07 17:26:50

不幸的是，使用具有設置爲「匿名」仍是crossOrigin屬性的圖像（）對象造成IE玷污畫布一旦圖像被繪製到它。

要解決這個問題，我做了以下內容：

我創造了我的服務器上的一個小腳本，接受一個URL，然後用給它的URL調用file_get_contents（）函數。爲了防止濫用這個腳本，我添加了一個「可接受的」域名列表，並且將結果的URL定製爲僅指向它應該請求的內容。這讓我可以在本地進行請求，這意味着我可以使用XMLHttpRequest對象而不是XDomainRequest對象。（這也爲支持IE7打開了大門）。
因爲IE不支持ATOB，我用base64相互轉換腳本這裏找到：How can you encode a string to Base64 in JavaScript? 我在encode功能註釋掉input = Base64._utf8_encode(input);，因爲數據是二進制的，而不是字符的實際字符串。

該解決方案有點「不得已而爲之」。它可以工作，但它非常慢（需要3分鐘而不是通常的3秒鐘）。最糟糕的部分是需要添加一個計時器，以使IE有機會正確呈現自定義對話框及其進度條。定時器迫使IE在進行下一個請求之前暫停一會兒。這是...很奇怪，考慮到我已經設置了異步請求。

這是我現在想出的最好的。如果其他人有更好的方式完成工作，請隨時發佈您的答案。

來源

2012-03-12 18:15:39 Axle

我可以通過XDomainRequest正確讀取二進制數據嗎？

回答

相關問題