Web/API/HTMLCanvasElement/toBlob

The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. If type is not specified, the image type is image/png. The created image is in a resolution of 96dpi.

The third argument is used when creating images using lossy compression (such as image/jpeg) to specify the quality of the output.

Syntax

canvas.toBlob(callback, mimeType, qualityArgument);

Parameters

callback: A callback function with the resulting Blob object as a single argument.
mimeType Optional: A DOMString indicating the image format. The default type is image/png.
qualityArgument Optional: A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored.

Return value

None.

Exceptions

SecurityError: The canvas's bitmap is not origin clean; at least some of its contents come from secure

Examples

Getting a file representing the canvas

Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the <canvas> element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new <img> element to the document, whose source image is the one created using the canvas.

var canvas = document.getElementById('canvas');

canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

Note that here we're creating a PNG image; if you add a second parameter to the toBlob() call, you can specify the image type. For example, to get the image in JPEG format:

 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality

A way to convert a canvas to an ico (Mozilla only)

This uses -moz-parse to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.

var canvas = document.getElementById('canvas');
var d = canvas.width;
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var a = document.createElement('a');
    a.textContent = 'Download';
    document.body.appendChild(a);
    a.style.display = 'block';
    a.download = iconName + '.ico';
    a.href = window.URL.createObjectURL(b);
  }
}
canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
              '-moz-parse-options:format=bmp;bpp=32');

Save toBlob to disk with OS.File (chrome/add-on context only)

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code, as OS APIs are not present on web sites.

var canvas = document.getElementById('canvas');
var d = canvas.width;
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var r = new FileReader();
    r.onloadend = function () {
    // r.result contains the ArrayBuffer.
    Cu.import('resource://gre/modules/osfile.jsm');
    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
                                 iconName + '.ico');
    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
                                      {tmpPath:writePath + '.tmp'});
    promise.then(
      function() {
        console.log('successfully wrote file');
      },
      function() {
        console.log('failure writing file')
      }
    );
  };
  r.readAsArrayBuffer(b);
  }
}

canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
              '-moz-parse-options:format=bmp;bpp=32');

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLCanvasElement.toBlob' in that specification.	Living Standard	No change since the latest snapshot, HTML5
HTML 5.1The definition of 'HTMLCanvasElement.toBlob' in that specification.	Recommendation	No change
HTML5The definition of 'HTMLCanvasElement.toBlob' in that specification.	Recommendation	Snapshot of the HTML Living Standard containing the initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`toBlob`	Chrome Full support 50	Edge Full support 79 Full support 79 No support 12 — 79 Prefixed' Prefixed' Implemented with the vendor prefix: ms	Firefox Full support 19	IE Full support 10 Prefixed' Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: ms	Opera Full support 37	Safari Full support 11	WebView Android Full support 50	Chrome Android Full support 50	Firefox Android Full support 4	Opera Android Full support 37	Safari iOS Full support 11	Samsung Internet Android Full support 5.0
Image quality parameter	Chrome Full support 50	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support 50	Chrome Android No support No	Firefox Android Full support 25	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.