WinJS, display image from a byte array?

Question

I'm looking for a way to display a JPEG image stored in a byte array. This is a Windows 8 Store App built in Javascript. The byte array is returned from a C# WinRT component. Its type in C# is byte[].

Basically, what I want is to get an object so that I can call:

URL.createObjectURL(bytearray, {oneTimeOnly: true});

upon. Currently this generates a runtime error because the array interface is not supported.

Thanks in advance.

have you checked about WinJS.xhr : msdn.microsoft.com/en-in/library/windows/apps/hh868282.aspx — Farhan Ghumra
– Farhan Ghumra, Commented Apr 7, 2013 at 14:16
Hmm.. I'm not looking for ways to download or transfer the file. How is xhr helpful in my case? The image is not from the web. — He Shiming
– He Shiming, Commented Apr 7, 2013 at 14:17
I am not pro in WinJS though, I found file to byte array solution, it might be helpful : stackoverflow.com/questions/14004190/… — Farhan Ghumra
– Farhan Ghumra, Commented Apr 7, 2013 at 14:20

He Shiming · Accepted Answer · 2013-04-10 13:15:41Z

4

I discovered a far easier method.

var blob = new Blob([bytes], {type: "image/jpg"});
var url = URL.createObjectURL(blob, { oneTimeOnly: true });

Blob is actually supported directly by URL.createObjectURL. The only catch is that you have to specify a mime format to identify the buffer format, which in my case is possible.

edited Apr 10, 2013 at 13:15

answered Apr 10, 2013 at 13:09

He Shiming

5,8195 gold badges41 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushil · Accepted Answer · 2013-04-07 14:47:03Z

2

Current solution I found is quite round about. Hence, before giving the solution for bytes to URL, few comments:

If there is better way to get to DOM stream/blob object from bytes, try out.
If you control the winrt component - check if you can return StorageFile object. In that case - code will simplifyto

var file = MSApp.createFileFromStorageFile(storageFile); var url = URL.createObjectURL(file, { oneTimeOnly: true });

now solution:

var bytes;
var memoryStream;    
var streams = Windows.Storage.Streams;
{

    // get IBuffer out of bytes
    var dataWriter = new streams.DataWriter();
    dataWriter.writeBytes(bytes);
    var buffer = dataWriter.detachBuffer();
    dataWriter.close();

    // get IInputStream out of IBuffer
    memoryStream = new streams.InMemoryRandomAccessStream();
    return memoryStream.writeAsync(buffer);
}).then(function onmemorystreamwritecomplete()
{
    var inputStream = memoryStream.getInputStreamAt(0);

    // get DOM MSStream from IInputStream
    var domMStream = MSApp.createStreamFromInputStream('image/jpg', inputStream);
    var url = URL.createObjectURL(domMStream, { oneTimeOnly: true });
    memoryStream.close();
    test3Img.setAttribute('src', url);
})

answered Apr 7, 2013 at 14:47

Sushil

5,5552 gold badges19 silver badges15 bronze badges

2 Comments

He Shiming Over a year ago

Hi, thank you very much for the solution. I do have control of the C# WinRT component. Is the conversion procedure same as this? And why would you recommend doing it in the component, is it a performance issue?

Sushil Over a year ago

keeping things simple always helps. this code snippet does bytes -> IBuffer -> IInputStream -> MSStream -> URL whereas other one can do StorageFile->File->URL . btw, is there a reason to read bytes from file in c# winrt component. it can be done in the js code.

Collectives™ on Stack Overflow

WinJS, display image from a byte array?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related