将PictureStream转换为HTML5画布

Question

我正在从一个.NET Web服务中检索一张图片流的字节数组。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/

- shitburg

Answer 1

这取决于字节数组中确切的内容。如果它是一系列RGB或RGBA值，您可以使用getImageData/putImageData来绘制它，就像Kieranmaine所提到的那样。

但是，如果字节数组只是来自jpeg或其他图像格式的数据，则通常无法以此方式访问单个像素数据。 在这种情况下，您可以尝试将其转换为base64以创建dataURI，创建图像元素，将源设置为该dataURI，并使用drawImage将其放置在画布上。

要从字节数组转换为data URI，您需要首先知道MIME类型。 但是，如果您知道它，请尝试使用以下代码。

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

在设置图像元素的src属性后，可能需要等待其加载事件触发后才能调用上下文的drawImage()方法。

- Kyle Jones

---

我相信数据来自PNG或JPEG，使用.NET中的ReadBytes方法。你能给我一个将原始字节流转换为base64的例子吗？ - shitburg

window.btoa会将ASCII字符串转换为base64格式；我已经回过头来，在我的答案中包含了一个示例。 - Kyle Jones

Answer 2

你需要使用方法getImageData(x, y, width, height)检索画布图像数据，然后使用字节数组中的值修改每个像素。

我创建了一个小演示，通过调用getImageData并使用字节数组更新图像数据来绘制红色、绿色和蓝色3像素长的线条。这是链接地址：

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

另外，关于从HTML Canvas获取像素的更多信息，请参见此答案getPixel from HTML Canvas?。

- Castrohenge

---

相信 imageData.data = byteArray 与在循环中分配每个索引一样有效。http://jsfiddle.net/WXfPF/2/ - MooGoo

谢谢你。在 Firefox 中似乎可以运行，但是在 Chrome 中不行，虽然它没有抛出异常。 - Castrohenge