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