将PictureStream转换为HTML5 canvas [英] Convert PictureStream to HTML5 canvas

问题描述

我从.net webservice检索pictureStream的字节数组。 JSON字节数组响应如下所示：

I am retrieving a byte array of a pictureStream from a .net webservice. the JSON byte array response looks like this:

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

我试图转换这个字节数组，并将其绘制到一个HTML画布像这样

I am trying to convert this byte array and draw it into an HTML canvas like this

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

但这不起作用。我没有访问修改webservice，所以我想把这个字节数组转换成一个图片使用Javascript。

But this doesn't work. I have no access the modify the webservice, so I am looking to convert this byte array into a picture using Javascript only. Also, I can't use server side scripting, client side only.

感谢您的帮助

此处是字节数组如何传入的示例： http://www.copypastecode.com/33072/

Here is an example of how the byte array comes in : http://www.copypastecode.com/33072/

推荐答案

这取决于字节数组究竟是什么。如果它是一系列的RGB或RGBA值，你可以使用getImageData / putImageData来绘制它，如Kieranmaine提到。

It depends what exactly is in the byte array. If it's a series of RGB or RGBA values, you can use getImageData/putImageData to draw it such as Kieranmaine mentioned.

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

But if the byte array is simply the data from a jpeg or other image format, you likely won't be able to access the individual pixel data in that manner. In such a case you might try converting it to base 64 to create a dataURI, creating an image element, setting the source to that dataURI and using drawImage to place it on the canvas.

要从字节数组转换为数据URI，你需要首先知道mime类型。
但如果你知道的话，尝试这个代码。

To convert from a byte array to a data URI, you'll need to know the mime type first. But if you know it, try this code.

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

设置img元素的src属性后，可能需要在调用上下文的drawImage（）方法之前等待其加载事件触发。

After setting the src attribute of the img element it's possible you may need to wait for its load event to fire before calling the context's drawImage() method.

这篇关于将PictureStream转换为HTML5 canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！