将ImageBitmap转换为Blob

Question

我正在使用createImageBitmap()函数创建一个ImageBitmap文件。ImageBitmap是什么？

我该如何将这个文件转换成Blob格式，或者最好是PNG格式，以便上传？

- beek

---

我对我的答案进行了编辑，使用位图渲染器上下文进行修改。第一版没有提及这一点，有些糊涂了... - Kaiido

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);

查看HTMLCanvasElement#toBlob()以获取可传递的选项（适用时的文件格式和质量）。

- Kaiido

---

那确实有帮助，但出现了一个问题，我得到了一个空图像.. 我把它放到了一个新的问题中https://stackoverflow.com/questions/52960102/createimagebitmap-returns-an-empty-image - beek

参考资料，我相信这个问题现在已经在Chrome中得到了解决。 - mwakerman