OffscreenCanvas: convertToBlob() method

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

The OffscreenCanvas.convertToBlob() method creates a Blob object representing the image contained in the canvas.

The desired file format and image quality may be specified. If the file format is not specified, or if the given format is not supported, then the data will be exported as image/png. Browsers are required to support image/png; many will support additional formats including image/jpeg and image/webp.

The created image will have a resolution of 96dpi for file formats that support encoding resolution metadata.

Syntax

js
convertToBlob()
convertToBlob(options)

Parameters

options Optional

An object with the following properties:

type

A string indicating the image format. The default type is image/png; this image format will be also used if the specified type is not supported.

quality

A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

Return value

A Promise returning a Blob object representing the image contained in the canvas.

Exceptions

The promise may be rejected with the following exceptions:

InvalidStateError DOMException

The OffscreenCanvas is not detached; in other words it still associated with the DOM and not the current worker.

SecurityError DOMException

The canvas context mode is 2d and the bitmap is not origin-clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.

IndexSizeError DOMException

The canvas bitmap has no pixels (either the horizontal or vertical dimension is zero).

EncodingError DOMException

The blob could not be created due to an encoding error.

Examples

js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

offscreen.convertToBlob().then((blob) => console.log(blob));
// Blob { size: 334, type: "image/png" }

Specifications

Specification
HTML
# dom-offscreencanvas-converttoblob-dev

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
convertToBlob
Chrome – Full support
Chrome 69 (Release date: 2018-09-04)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 105 (Release date: 2022-09-20)
altname
altname Alternate name: toBlob
Firefox – Full support
Firefox 105 (Release date: 2022-09-20)
footnote Full support
Opera – Full support
Opera 56 (Release date: 2018-09-25)
footnote Full support
Safari – Full support
Safari 16.4 (Release date: 2023-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 69 (Release date: 2018-09-04)
footnote Full support
Firefox for Android – Full support
Firefox for Android 105 (Release date: 2022-09-20)
altname
altname Alternate name: toBlob
Firefox for Android – Full support
Firefox for Android 105 (Release date: 2022-09-20)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 16.4 (Release date: 2023-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 10 (Release date: 2019-08-22)
footnote Full support
WebView Android – Full support
WebView Android 69 (Release date: 2018-09-04)
footnote Full support
WebView on iOS – Full support
WebView on iOS 16.4 (Release date: 2023-03-27)
footnote Full support
option.type parameter supports "image/webp"
Chrome – Full support
Chrome 69 (Release date: 2018-09-04)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 105 (Release date: 2022-09-20)
footnote Full support
Opera – Full support
Opera 56 (Release date: 2018-09-25)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 69 (Release date: 2018-09-04)
footnote Full support
Firefox for Android – Full support
Firefox for Android 105 (Release date: 2022-09-20)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 10 (Release date: 2019-08-22)
footnote Full support
WebView Android – Full support
WebView Android 69 (Release date: 2018-09-04)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name
Has more compatibility info.

See also