Конвертировать ImageBitmap в Blob

Question

Я использую createImageBitmap (), который создает файл ImageBitmap .

Как мне преобразовать этот файл в BLOB-файл или, в идеале, в PNG, чтобы я мог загрузить его?

Answer 1

Единственный способ в настоящее время - это нарисовать его на холсте.

Для большей эффективности вы можете попробовать использовать ImageBitmapRenderingContext , который не скопируетпиксельный буфер снова.

Важное замечание относительно использования растрового преобразователя:
Хотя это действительно лучшая практика, Chrome в настоящее время имеет ошибку что приведет к тому, что выходное изображение будет прозрачным и, таким образом, заставит нас вместо этого использовать 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 () для параметров, которые вы можете передать (формат и качество файла, если применимо).