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.
Promise<Blob> OffscreenCanvas.toBlob(type, encoderOptions);
type
Optional
DOMString
indicating the image format. The default type is image/png
.encoderOptions
Optional
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 value for image quality is used. Other arguments are ignored.A Promise
returning a Blob
object representing the image contained in the canvas.
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" }
Currently drafted as a proposal: OffscreenCanvas.
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 69 | ? | 46
|
No | 56 | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | 69 | ? | 46
|
Yes | No | No |
OffscreenCanvas
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/toBlob