HTML and CSS Reference
window.URL = window.URL || window.webkitURL;
var source =
// 3. Create an image tag programmatically.
var image = document.createElement("img");
image.src = source;
image.alt = "Image generated from blob";
// 4. Insert the new image at the end of
The preceding code snippet generates an image by properly interpreting the incom-
handle the blob. Let's be more specific.
At first, you verify that the server message is an instance of blob, similar to the way
you checked for the buffered array. Then, you store the raw data to a local variable,
named blob .
In order to display the blob in an image format, you need to decode it properly. The
reading the bytes, you create a plain URL to the specified data source. This URL is
alive as long as the HTML document is alive. That means you cannot retrieve it after
closing your browser window.
The window.URL property is currently supported in all the major browsers, though
Google Chrome has named it window.webkitURL . The createObjectURL
method generates a URL for the temporary file specified as a parameter. You do not
the blob you received as a normal browser URL!
Finally, using the DOM manipulation methods you already know, you create an im-
age element, you provide it with the new URL, and you insert it right at the end of the