Convert ImageBitmap to Blob

Question

I'm using createImageBitmap() which creates an ImageBitmap file.

How do I convert this file to a blob or ideally PNG so I can upload?

Answer 1

The only way currently is to draw it on a canvas.

For more efficiency, you can try to use an ImageBitmapRenderingContext, which will not copy the pixels buffer again.

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

However transferring an ImageBitmap will internally close it and thus make it unusable later. If you need to use it again later, you could create a new ImageBitmap from it before transferring it (async but small footprint), or use either the bitmap renderer's canvas where you'd have used the bitmap (may not be practical in every case), so the easiest in that particular case might be to use a 2D context and drawImage which will keep the ImageBitmap "alive".

Check HTMLCanvasElement#toBlob() for the options you can pass in (file format and quality when applicable).