Creating Blobs and Blob URIs
In the previous article, we talked about Blob URIs, which is just a reference to a Blob in a web browser. A Blob, as previously mentioned, can be anything. In this article, we’ll walk through downloading and converting an image into a Blob then referencing it within the DOM.
We’ll start out by first creating a NodeJS project. So, in a new folder, go ahead and type:
npm init
Follow the prompts. Next, we’ll install the “http-serve” dependency so we can host our files on a local web server.
npm install -s http-serve
Open package.json and add the following to the “scripts” section:
"serve": "http-serve -c-1"
Now, create an index.html file and add the following contents:
<html> <head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22app.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </head> <body onload="onload()"> <img id="image"> </body> </html>
This simply pulls in the JavaScript we’ll create next, adds an “img” tag into the DOM, and invokes the “onload” function once the document body has fully loaded.
Next, create an app.js file and add the following:
function onload() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "./image.jpeg");
xhr.responseType = "arraybuffer";
xhr.onload = function(error) {
var blob = new Blob([xhr.response]);
var blobUrl = URL.createObjectURL(blob);
console.log(blobUrl);
document.getElementById("image").src = blobUrl;
}
xhr.send();
}
This creates our “onload” function that was referenced in index.html. The “onload” function will fetch an image via AJAX and return it as an “ArrayBuffer” object. With this object, we then create a new instance of a Blob by passing the ArrayBuffer into the Blob’s constructor. After this, we create a reference string that allows us to access the blob from the DOM. This is done by calling “URL.createObjectURL”. This reference is then injected into the “img” tag’s “src” attribute which then renders the image in the browser.
Let’s see this in action! Go ahead and grab any JPEG image and save it as “image.jpeg” in the same folder as everything else.
After you have the image saved, run the following command to start the HTTP server:
npm run serve
Once that’s started open your browser to http://localhost:8080/ and you should see the image on the screen. If you don’t see it and have an ad-blocker installed, try disabling your ad-blocker.
There are other ways you can create Blobs. For instance, in the source above, you could have simply set the xhr.responseType to “blob” to avoid the step of actually creating the Blob instance. However, doing this wouldn’t give you the opportunity to manipulate the data coming back, which you might need to do if the content is encrypted.
Source code for this post is available here:
Hi Dan, URL.createObjectURL is deprecated now, which is why this line
var blobUrl = URL.createObjectURL(blob);
isn’t working anymore. Do you have an idea how to solve this?
Hi Kate, which browser are you using? I just tried it on Chrome 74 and Firefox 66 and it worked. You are right though that the API is deprecated. I’ll see what I can figure out. Thanks for pointing that out!
Edit: I checked the API docs again and it looks like the URL.createObjectURL(stream) API has been deprecated. The URL.createObjectURL(blob) API still remains and so this code should work. See: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL