HTMLCanvasElement: toBlob() 方法

基线广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

HTMLCanvasElement.toBlob() 方法创建一个表示画布中包含的图像的 Blob 对象。此文件可能会根据用户代理的决定缓存在磁盘上或存储在内存中。

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

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

语法

toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)

参数

回调函数: 一个回调函数，其结果为 Blob 对象作为单个参数。如果由于任何原因无法创建图像，则可能会传递 null。
type 可选: 一个字符串，指示图像格式。默认类型为 image/png；如果给定的类型不受支持，则也使用该类型。
quality 可选: 一个介于 0 和 1 之间的 Number，指示在使用支持有损压缩的文件格式（如 image/jpeg 或 image/webp）创建图像时要使用的图像质量。如果未指定此选项，或数字超出允许范围，则用户代理将使用其默认质量值。

返回值

无 (undefined）。

异常

SecurityError: 画布的位图不是源清晰的；其至少部分内容已加载或可能已加载自文档本身加载的站点以外的站点。

示例

获取表示画布的文件

将内容绘制到画布中后，您可以将其转换为任何受支持的图像格式的文件。例如，下面的代码片段获取 ID 为“canvas”的 <canvas> 元素中的图像，获取其 PNG 图像副本，然后将一个新的 <img> 元素附加到文档中，其源图像为使用画布创建的图像。

const canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  const newImg = document.createElement("img");
  const url = URL.createObjectURL(blob);

  newImg.onload = () => {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

请注意，这里我们创建的是 PNG 图像；如果向 toBlob() 调用添加第二个参数，则可以指定用户代理支持的其他图像类型。例如，要获取 JPEG 格式的图像

canvas.toBlob(
  (blob) => {
    /* … */
  },
  "image/jpeg",
  0.95,
); // JPEG at 95% quality

将画布转换为 ico（仅限 Mozilla）

这使用 -moz-parse 将画布转换为 ico，因此仅在 Firefox 上有效。Windows XP 不支持从 PNG 转换为 ico，因此它使用 bmp。通过设置 download 属性创建下载链接。download 属性的值是它将用作文件名。

const canvas = document.getElementById("canvas");
const d = canvas.width;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = `${iconName}.ico`;
    a.href = window.URL.createObjectURL(b);
  };
}
canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

使用 OS.File 将 toBlob 保存到磁盘（仅限 Chrome/附加组件上下文）

注意：此技术将其保存到桌面，并且仅在 Firefox chrome 上下文或附加组件代码中才有用，因为网站上不存在 OS API。

const canvas = document.getElementById("canvas");
const d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const r = new FileReader();
    r.onloadend = () => {
      // r.result contains the ArrayBuffer.
      Cu.import("resource://gre/modules/osfile.jsm");
      const writePath = OS.Path.join(
        OS.Constants.Path.desktopDir,
        `${iconName}.ico`,
      );
      const promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), {
        tmpPath: `${writePath}.tmp`,
      });
      promise.then(
        () => {
          console.log("successfully wrote file");
        },
        () => {
          console.log("failure writing file");
        },
      );
    };
    r.readAsArrayBuffer(b);
  };
}

canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

规范

规范
HTML 标准 # dom-canvas-toblob-dev

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅

Blob