javascript - 将ImageBitmap转换为Blob

我正在使用createImageBitmap（）创建一个ImageBitmap文件。

如何将该文件转换为Blob或理想的PNG，以便可以上传？

最佳答案

当前唯一的方法是将其绘制在画布上。

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


  有关使用bitmaprenderer的重要说明：
  虽然这确实是最佳实践，但Chrome currently has a bug会使输出图像透明，从而迫使我们改用2d上下文。
  尽管希望此错误能尽快得到解决，但我仍使用bitmaprenderer上下文保留了代码，但这意味着以下代码段暂时仅适用于FF。

fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
  .then(r => r.blob()) // yes.. from a Blob to a Blob...
// ImageBitmap generation
  .then(createImageBitmap)
// to Blob
  .then(img => {
    console.log(img); // ImageBitmap
    return new Promise(res => {
      // create a canvas
      const canvas = document.createElement('canvas');
      // resize it to the size of our ImageBitmap
      canvas.width = img.width;
      canvas.height = img.height;
      // try to get a bitmaprenderer context
      let ctx = canvas.getContext('bitmaprenderer');
      if(ctx) {
        // transfer the ImageBitmap to it
        ctx.transferFromImageBitmap(img);
      }
      else {
        // in case someone supports createImageBitmap only
        // twice in memory...
        canvas.getContext('2d').drawImage(img,0,0);
      }
      // get it back as a Blob
      canvas.toBlob(res);
    });
  })
  .then(blob => {
    console.log(blob); // Blob
    var img = document.body.appendChild(new Image());
    img.src = URL.createObjectURL(blob);
  });

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