Create a jpg image from ArrayBuffer data

image-arraybuffer.js

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

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

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

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
};

xhr.send();

Please note this method does not convert a PNG image into a JPG. In order to do so, you have to put the image in a <canvas> and export it using .toDataURI or .toBlob (not always possibile, as the image must have the same origin) using 'image/jpeg' as the output format.

I know this isn't the reason of this gist, just warning other passers-by who may get confused.

Thank you

Thank you very much ;)

very useful. thank you so much for sharing

Thanks a lot, man! You do saved a lot of my life-time ))))

awesome, thanks!

i was hoping there was another way to do this...
thanks for your solution, anyways...
but it's exactly what i feared needed to be done...

i feel like i'm being punished for NOT wanting to just throw all my files SEPARATELY on some server >.<

thanks a lot man

You are best!

Worked like a charm!

Thanks a lot!

Thank you.

love you

love you

Thanks a lot!

Thanks a Lot for this, I was wondering about the Int8Array, Uint8Array, Int16Array fetched in the response data object. Is there a difference ?

Thanks man. This really saved me. I have a questions. Why does this example use XMLHttpRequest instead of fetch()? I'm assuming that is because the example was written 9 year ago but maybe there is another reason?

Thanks for this!

Is wrapping this.response into Uint8Array necessary? Doc says that ArrayBuffer can also be used as blob part.

Thanks a lot for this