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

1

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

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

  • 0
    Я внес изменения в свой ответ, чтобы он использовал контекст bitmaprenderer. Было глупо не упоминать об этом в первом рев ....
Теги:
image
html5-canvas

1 ответ

1
Лучший ответ

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

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

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

  • 0
    Это действительно помогает, но по какой-то причине я получаю пустое изображение ... Я вставил его в новый вопрос stackoverflow.com/questions/52960102/…
  • 0
    О, теперь я вижу, что это не работает на Chrome! Я был на FF, когда делал мои тесты ...
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню