将 PictureStream 转换为 HTML5 画布答案

【问题标题】：Convert PictureStream to HTML5 canvas将 PictureStream 转换为 HTML5 画布
【发布时间】：2010-07-22 20:05:19
【问题描述】：

我正在从 .net 网络服务中检索图片流的字节数组。 JSON 字节数组响应如下所示：

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

我正在尝试转换此字节数组并将其绘制到这样的 HTML 画布中

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

但这不起作用。我无法访问修改 web 服务，所以我希望仅使用 Javascript 将此字节数组转换为图片。另外，我不能使用服务器端脚本，只能使用客户端。

感谢您的帮助

这是一个字节数组如何进来的例子：http://www.copypastecode.com/33072/

【问题讨论】：

【解决方案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 属性后，您可能需要等待其加载事件触发，然后再调用上下文的 drawImage() 方法。

【讨论】：

【解决方案2】：

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

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

有关更多信息，另请参阅此答案getPixel from HTML Canvas?。

【讨论】：