將PictureStream轉換爲HTML5畫布

Question

我從.net webservice中檢索pictureStream的字節數組。 JSON的字節數組迴應是這樣的：

[137, 80, 78, 372, 617 more...] 

我想轉換此字節數組，並繪製成HTML畫布這樣

var context = document.getElementById('boxcover').getContext('2d'); 
context.putImageData(movies.PictureStream, 0, 0); 

但是，這是行不通的。我沒有訪問修改webservice，所以我正在尋找轉換這個字節數組成一個圖片使用Javascript只。另外，我不能使用服務器端腳本，只能在客戶端使用。

感謝您的幫助

這裏是字節數組如何進來的例子：http://www.copypastecode.com/33072/

Answer 1

這取決於字節數組中究竟是什麼。如果它是一系列RGB或RGBA值，則可以使用getImageData/putImageData來繪製它，例如提到的Kieranmaine。

但是，如果字節數組僅僅是來自jpeg或其他圖像格式的數據，那麼您可能無法以該方式訪問單個像素數據。 在這種情況下，您可以嘗試將其轉換爲base 64以創建dataURI，創建一個image元素，將源設置爲該dataURI並使用drawImage將其放置在畫布上。

要從字節數組轉換爲數據URI，首先需要知道mime類型。 但是，如果你知道它，請嘗試下面的代碼。

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

設置img元素的src屬性有可能之後，你可能需要等待其Load事件調用上下文的的drawImage（）方法之前進行發射。

Answer 2

需要使用該方法getImageData（X，Y，寬度，高度，以檢索畫布圖像數據），然後使用字節數組中的值修改每個像素。

我創建了一個小型演示程序，通過調用getImageData繪製紅色，綠色和藍色3像素長行，然後使用字節數組更新圖像數據。這裏的網址：

http://jsfiddle.net/WXfPF/1/

也看到這個答案的其他信息getPixel from HTML Canvas?。