将 ImageBitmap 转换为 Blob

Question

我正在使用 createImageBitmap() 创建一个 ImageBitmap 文件。

如何将此文件转换为 blob 或最好是 PNG 以便我可以上传？

Answer 1

目前唯一的方法就是在画布上绘制。

为了提高效率，您可以尝试使用 ImageBitmapRenderingContext，它将不会再次复制像素缓冲区。

(async () => {

  const resp = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
  // yes.. from a Blob to a Blob...
  const blob1 = await resp.blob();
  const bmp = await createImageBitmap(blob1);
  console.log(bmp); // ImageBitmap
  // create a canvas
  const canvas = document.createElement('canvas');
  // resize it to the size of our ImageBitmap
  canvas.width = bmp.width;
  canvas.height = bmp.height;
  // get a bitmaprenderer context
  const ctx = canvas.getContext('bitmaprenderer');
  ctx.transferFromImageBitmap(bmp);
  // get it back as a Blob
  const blob2 = await new Promise((res) => canvas.toBlob(res));
  console.log(blob2); // Blob
  const img = document.body.appendChild(new Image());
  img.src = URL.createObjectURL(blob2);
  
})().catch(console.error);

但是，传输

ImageBitmap

会在内部 关闭 它，从而使其稍后无法使用。如果您稍后需要再次使用它，您可以在传输它之前从中创建一个新的

ImageBitmap

（异步但占用空间小），或者使用位图渲染器的画布，您将在其中使用位图（在每种情况），因此在该特定情况下最简单的可能是使用 2D 上下文和

drawImage

，这将使

ImageBitmap

“活着”。

检查HTMLCanvasElement#toBlob()以获取可以传入的选项（文件格式和质量（如果适用））。