HTML and CSS Reference
In-Depth Information
window.URL = window.URL || window.webkitURL;
var source =
window.URL.createObjectURL(blob);
// 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 document.
document.body.appendChild(image);
}
}
The preceding code snippet generates an image by properly interpreting the incom-
ing raw data. You have used some brand-new HTML5 JavaScript methods to easily
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
new JavaScript API makes basic image manipulation a piece of cake. Instead of
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
need to provide any further details or write any further code! JavaScript represents
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
HTML document.
Search WWH ::




Custom Search