OffscreenCanvas: convertToBlob() 方法

基线 2023

新功能

自 2023年3月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

注意：此功能在Web Workers中可用。

OffscreenCanvas.convertToBlob() 方法创建一个表示画布中包含的图像的Blob 对象。

可以指定所需的的文件格式和图像质量。如果未指定文件格式，或者给定的格式不受支持，则数据将以 image/png 格式导出。浏览器必须支持 image/png；许多浏览器还支持其他格式，包括 image/jpeg 和 image/webp。

对于支持编码分辨率元数据的文件格式，创建的图像将具有 96dpi 的分辨率。

语法

convertToBlob()
convertToBlob(options)

参数

options 可选

具有以下属性的对象

type: 指示图像格式的字符串。默认类型为 image/png；如果指定的类型不受支持，也将使用此图像格式。
quality: 一个介于 0 和 1 之间的Number，指示在使用支持有损压缩的文件格式（如 image/jpeg 或 image/webp）创建图像时要使用的图像质量。如果未指定此选项，或者数字超出允许范围，则用户代理将使用其默认质量值。

返回值

一个返回表示画布中包含的图像的Blob 对象的Promise。

异常

Promise 可能因以下异常而被拒绝

InvalidStateError DOMException: OffscreenCanvas 未分离；换句话说，它仍然与 DOM 关联，而不是当前的工作线程。
SecurityError DOMException: 画布上下文模式为 2d，并且位图不是源干净的；其某些内容已加载或可能已从文档本身加载的站点以外的站点加载。
IndexSizeError DOMException: 画布位图没有像素（水平或垂直尺寸为零）。
EncodingError DOMException: 由于编码错误，无法创建 Blob。

示例

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" }

规范

规范
HTML 标准 # dom-offscreencanvas-converttoblob-dev

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

定义此方法的接口，OffscreenCanvas。