ArrayBuffer to jpeg

Question

I am streaming ArrayBuffers from a python server and am trying to interpret each one as an image on the client side with javascript. They are being received as arraybuffers in javascript. However I cant get them to be readable by the image tags src attribute. I have tried generating them into Blob objects then using window.URL.createObjectURL(blob). That hasnt work either.

The blob url looks like this blob:null/e2836074-64b5-4959-8211-da2fc24c35a6 is that wrong?

Does any have any suggestions/know a solution.

Thanks a lot.

var arrayBuffer = new Uint8Array(stream.data);
var blob = new Blob([arrayBuffer], {type: "image/jpeg"});
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
console.log(imageUrl);
img.src = imageUrl;

array buffer image

What does the streamed data actually contain? Is it raw pixel values or are you sending complete images as found in a file on disk, or something else entirely? (There's no way of telling if that blob url is any good or not - it's too short, you'd need the _whole_ thing) — enhzflep, Feb 03 '19 at 04:36
@enhzflep Thank you for the reply. I added a photo of what the array buffer looks like right after it has been recieved. — Kai Ferrall, Feb 03 '19 at 04:44
Can you include at least one complete `TypedArray` at the question as plain text or formatted code? Did you create a `Blob` object or pass the `ArrayBuffer` directly to `URL.createObjectURL()`? — guest271314, Feb 03 '19 at 04:47
@Kai - Okay then, so there's obviously no format of size information. There's no obvious header to speak of. So with that out of the way, what are you streaming, do you even know? There's nothing shown to indicate in any shape or form what format the data is in. How wide should the image be, how high? Does it have an alpha channel? How many bits per pixel? Is the data compressed in any way? Blah, blah, blah, blah - There's a lot that would need to be ascertained in order to ensure that this question isn't too broad and unable to be answered! — enhzflep, Feb 03 '19 at 04:56
@KaiFerrall Are you sure the image type is `"image/jpeg"`? Can you include at least one complete `TypedArray` at the question? See https://stackoverflow.com/help/mcve — guest271314, Feb 03 '19 at 05:00
@enhzflep I added my code for converting the initial array buffer after its recieved. — Kai Ferrall, Feb 03 '19 at 05:03
@Kai - I can't help but zero-in on the following text from the original question: "am trying to interpret". This makes me wonder if the streamed stuff is just *stuff* and you'd like visual representation (whatever that would actually represent) of it. If this is the case, use the data to set the pixels on a canvas, then do a toDataURL on the canvas to extract an actual image (png/jpg) from it. If the data is not an image, try to avoid the lossy JPG encoding, since PNG will save your data accurately, while JPG would save an image *fairly accurately* Does this help? — enhzflep, Feb 03 '19 at 05:09

score 0 · Answer 1 · answered Feb 05 '19 at 16:11

If you have any control over things, you should use the responseType of blob on your Javascript call. This will let you use the data you are getting from your server directly instead of attempting to access it via an ArrayBuffer

See the following fiddle for an example: https://jsfiddle.net/ort74gmp/

// Simulate a call to Dropbox or other service that can
// return an image as a blob
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "blob";

xhr.onload = function( e ) {
    var blob = this.response;
    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
      document.querySelector('#photo').src = dataURL;
    }
    reader.readAsDataURL(blob);
};

xhr.send();

ArrayBuffer to jpeg

1 Answers1