Skip to content

Instantly share code, notes, and snippets.

@candycode
Created March 7, 2014 15:24
Show Gist options
  • Star 89 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • Save candycode/f18ae1767b2b0aba568e to your computer and use it in GitHub Desktop.
Save candycode/f18ae1767b2b0aba568e to your computer and use it in GitHub Desktop.
Create a jpg image from ArrayBuffer data
// 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();
@khokm
Copy link

khokm commented May 21, 2023

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

@shyamjayakannan
Copy link

Thanks a lot for this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment