How to create a blob from the content of a canvas element, with Javascript compatible with all browsers.
In the day-to-day work with images generated through the Canvas element, there will come a time when you want to use the content, the image, in other contexts besides being seen in the browser itself. One of the possible alternatives, creating a Blob, is the one we are going to cover in this article.
A Blob is a Javascript object in which we have raw data, being immutable. File objects, also from Javascript, are a type of blob. Various Javascript APIs, browser standards or third-party APIs expect to receive blobs to provide information coming from various points, such as a file you fetch from a URL, an image generated on the fly with a Canvas, etc.
Generating a blob from a canvas is somewhat automatic, with a simple method on the canvas object, but it doesn’t work in all browsers, so you have to use a polyfill as well. We will see all this below.
Note: In my case, and to serve as an example, the first time I needed to use them is because it requires a File or a Blob to upload content to the storage space.
Generate a blob with the canvas element API
The easiest and most direct way is to generate your blob from the toBlob() method of the canvas element.
The toBlob() method takes three parameters:
- A callback function that will be executed when the blob has been produced. This function receives the blob that was just generated.
- An image type you want to generate, optional, defaulting to “image/png”.
- The quality factor of the file, a number between 0 and 1. This parameter is mandatory if you are producing an “image/jpeg” type file.
var canvas = document.getElementById(“micanvas”); canvas.toBlob(function(blob) { //the blob variable here contains the blob that was just generated });
It is as simple as that, however we will find the problem that today this method is not implemented in all browsers. In fact, it only works completely fine in Firefox at the time of writing. Chrome is not supported, although the standard has already been approved so we hope it can be used soon. Internet Explorer as of 10 already has the method, but it does not yet produce JPG files.
Polyfill to generate the blob from the canvas canvas-to-blob
The solution to extend support for generating blob objects in most browsers is to install a polyfill in your project.
Note: You may already know that a polyfill is a library that offers support for features that are not yet natively offered in all browsers.
The library that I have successfully used to produce the blob from the canvas is called canvas-to-blob. you find it in
You can install it by any dependency manager in your project, or download the files and copy to your project manually. I have obtained it through Bower:
bower install –save canvas-to-blob
Once you have it, you can include the necessary script:
Once your script is installed, you will be able to generate the blobs from the canvas elements, in the same way that you do it through the native API, as we have seen before.
Complete example of generating the blob from the canvas
In the following example you have the creation of a blob in JPG format, generated from a canvas on which we have drawn a simple rectangle.
Note: You can learn how to draw on a Canvas in the . Its applications are very wide.
As you can see, we have a button that, by clicking on it, generates the blob object. We don’t do anything special with that blob, that part already depends on your specific needs, we only show it on the console. When viewing the object in the console you will be able to observe its size, which will vary depending on the quality that you assign to the jpg that is going to be produced.
As you have seen, creating a blob from a canvas is a fairly simple task. We hope it works for you.
Facebook Comments
Disqus