將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，創建圖像元素，將源設置為該dataURI並使用drawImage將其放置在畫布上。

要從字節數組轉換為數據URI，您首先需要知道mime類型。 但如果您知道，請嘗試此代碼。

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

在設置img元素的src屬性之后，您可能需要等待其load事件在調用上下文的drawImage（）方法之前觸發。

Answer 2

您需要使用方法getImageData（x，y，width，height）檢索畫布圖像數據，然后使用字節數組中的值修改每個像素。

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

另請參閱此答案以獲取HTML Canvas的其他信息getPixel？ 。