2016-10-12 67 views
0

我請求來自我的HTTP的圖像(image/jpegimage/png)經由jQuery的AJAX請求斷絕:接收通過jQuery AJAX的圖像和不具有服務器的base64顯示圖像編碼圖像

$.ajax({ 
    'url': '/my/cool/api/server', 
    'contentType': 'application/json', 
    'data': '{"some":1,"cool":2,"request":3,"data":4}', 
    'type': 'POST' 
}).done(function(data) { 
    // what to do here? 
}); 

服務器不返回正確的圖像。我想使用src=data:image/png;base64,...語法在img標記中顯示返回的圖像。我不希望服務器在base64中包裝圖像,所以我需要通過Javascript在webbrowser中完成。我該怎麼做呢?回調中的data變量似乎受到某種程度的損壞。我可以讓jQuery爲我返回原始圖像字節嗎?或者讓jQuery對我的base64數據進行編碼?

我已經有一個工作香草JS版本,因此我原則上知道尼特是可能的。我正在尋找的這個工作香草JS代碼工作jQuery的變種:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', '/my/cool/api/server', true); 
xhr.responseType = 'arraybuffer'; 
xhr.onload = function(e) { 
    var arr = new Uint8Array(this.response); 
    var raw = String.fromCharCode.apply(null, arr); 
    var b64 = window.btoa(raw); 
    var imgElem = document.getElementById('TODOImg'); 
    imgElem.src = 'data:image/jpeg;base64,' + b64; 
}; 
xhr.send(); 
+0

如何讓服務器將_URL_返回給圖像,然後將其設置爲'img'標籤的src'屬性。瀏覽器將自動請求新圖像並顯示它。 – ADyson

+0

沒有此圖像的URL。這個問題不是關於改變服務器。它關於改變客戶。 – HASSeering

+0

好吧。我只是認爲這是值得建議的情況下,因爲它更簡單。 – ADyson

回答

0

如果你想要做你已經做了什麼,而是使用jQuery,你或多或少都存在。

在jQuery的「完成」函數中,您完全可以在原生XHR請求的「onload」函數中執行該操作。

但是,jQuery的ajax並不真正支持二進制數據,因此您可能需要插入二進制傳輸到它 - 請參閱http://www.henryalgus.com/reading-binary-files-using-jquery-ajax