HTMLCanvasElement.toBlobくそ遅い

developer.mozilla.org

3072 x 1920 とかでかい解像度のcanvasをBlobに変換するとクソ遅い。

canvas.toBlob((blob) => {
  // Do something
})

callbackつらいのでPromise化

new Promise((resolve) =>
  canvas.toBlob((blob) => resolve(blob))
)

でも遅いので結局自前

function toBlob(base64) {
  const bin = atob(base64.replace(/^.*,/, ''))
  const buffer = new Uint8Array(bin.length).map((_, i) => (bin.charCodeAt(i)))
  return new Blob([buffer.buffer], {
    type: 'image/jpeg',
  })
}

OffscreenCanvasだとちょっと早い。toBlobはノンブロッキングっぽいのでビデオ止めると早くなる（なった）