將PictureStream轉換爲HTML5畫布

我從.net webservice中檢索pictureStream的字節數組。 JSON的字節數組迴應是這樣的：將PictureStream轉換爲HTML5畫布

[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/

2010-07-22 shitburg

這取決於字節數組中究竟是什麼。如果它是一系列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（）方法之前進行發射。

2010-07-22 22:02:29

我相信這些數據來自PNG或JPEG，使用.net 中的ReadBytes方法可以給我一個將原始字節流轉換爲base64的例子嗎？ – shitburg 2010-07-22 23:03:06

window.btoa會將ASCII字符串轉換爲64;我回去了，並在我的回答中加入了一個例子。 – 2010-07-23 05:04:30

Kyle你是男人之間的神，謝謝兄弟！ – shitburg 2010-07-23 13:57:29

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

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

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

2010-07-22 21:50:25 Castrohenge

這似乎是工作，但圖片是完全亂碼。 – shitburg 2010-07-22 23:01:27

很確定'imageData.data = byteArray'在分配循環中的每一個索引時都能工作。 http://jsfiddle.net/WXfPF/2/ – MooGoo 2010-07-23 01:32:32

謝謝你。似乎在FF中工作，但不是鉻，但它不會拋出異常。 – Castrohenge 2010-07-23 08:03:22

回答