dom / latest / offscreencanvas / converttoblob.html /

OffscreenCanvas.convertToBlob()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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/jpg and image/webp.

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

Syntax

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

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

// ... some drawing using the gl context ...

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
convertToBlob
69
79
46
No
56
No
69
69
No
48
No
10.0
option_type_parameter_webp
69
79
96
No
56
No
No
69
No
48
No
10.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob