Canvas-to-Blob Conversion

Canvas conversion techniques have been expanded from supporting only data: URL conversion to saving the canvas bitmap as a binary object. We have already written about the method signature of canvas.toDataURL(). The method's argument list can be empty, or it can include a MIME type and an optional quality level for JPEG images. The default type is image/png. In addition to PNG and JPEG types, Google Chrome supports image/webp:

window.open(canvas.toDataURL()); // the default type is image/png
window.open(canvas.toDataURL("image/webp")); // MIME type specified explicitly
window.open(context.canvas.toDataURL("image/jpeg", 1.0)); // image/jpeg type and a quality level

One of possible scenarios of using the canvas data obtained as data: URL is the building of HTML elements dynamically: for example, if a user agent supports links with the download attribute, a Base-64 encoded image can be downloaded as a PNG file:

var url=canvas.toDataURL();
var link=document.createElement("a");
link.href=url;
link.download="canvas.png";
link.appendChild(document.createTextNode("download image"));
document.body.appendChild(link);

Canvas-to-Blob Conversion Method

Getting the canvas data as Blob is another way to reserve the canvas bitmap for any future use. Canvas-to-Blob conversion has been implemented in Firefox, so the following code will work in applications targeting the Mozilla browser:

canvas.toBlob(
 function(canvasDataBlob) { // anonymous callback with a handle to Blob
  var url=window.URL.createObjectURL(canvasDataBlob, {autoRevoke: true});
  var image=new Image();
  image.src=url;
  document.body.appendChild(image);
 },
 "image/jpeg", 1.0 // optional arguments: MIME type and quality level
);

Let's consider the code snippet in detail. The canvas toBlob() method must have an argument representing a callback with a handle to a newly created Blob. The argument in the example above is an anonymous function, and its canvasDataBlob argument is a binary large object containing the canvas bitmap data. The Blob is then used to create a new HTMLImageElement. A pair of optional arguments indicate the MIME type of the image and a JPEG quality level. If the arguments are not specified, the default type of the returned image is image/png.

Mozilla Extension: Getting Canvas As File

There's a Firefox-specific Canvas API extension allowing the developer to obtain the canvas data directly as File:

var file=canvas.mozGetAsFile("canvas.jpg", "image/jpeg");
var link=document.createElement("a");
var url=window.URL.createObjectURL(file, {autoRevoke: true});
link.href=url;
link.download=file.name;
link.appendChild(document.createTextNode("download image"));
document.body.appendChild(link);


The vendor-prefixed mozGetAsFile() method accepts a mandatory argument denoting the file name and an optional MIME type argument. The method returns a File instance with the following properties: its name property is "canvas.jpg", its type is image/jpeg, the size is the amount of bytes resulting from the bitmap-to-JPEG conversion, the lastModifiedDate property reflects the date of the File instantiation. In the example above the File object is used to create a new hyperlink with the download attribute.

Summary: Canvas-to-Blob Conversion

canvas.toBlob(callback);
canvas.toBlob(callback, MIME type);
canvas.toBlob(callback, MIME type, JPEG quality level);
callback(Blob)

var file=canvas.mozGetAsFile(fileName);
var file=canvas.mozGetAsFile(fileName, MIME type);