This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The OffscreenCanvas.toBlob()
method creates a Blob
object representing the image contained in the canvas.
Syntax
Promise<Blob> OffscreenCanvas.toBlob(type, encoderOptions);
Parameters
type
Optional- A
DOMString
indicating the image format. The default type isimage/png
. encoderOptions
Optional- A
Number
between0
and1
indicating image quality if the requested type isimage/jpeg
orimage/webp
. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.
Return value
A Promise
returning a Blob
object representing the image contained in the canvas.
Examples
var offscreen = new OffscreenCanvas(256, 256); var gl = offscreen.getContext("webgl"); // ... some drawing using the gl context ... offscreen.toBlob().then(function(blob) { console.log(blob); }); // Blob { size: 334, type: "image/png" }
Specifications
Currently drafted as a proposal: OffscreenCanvas.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | 46 (46) [1] | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 46.0 (46) [1] | No support | No support | No support |
[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled
to true
.
See also
- The interface defining this method,
OffscreenCanvas
.