createImageBitmap возвращает пустое изображение

Question

Я использую createImageBitmap для преобразования изображения в работнике.

В BLOB-объекте содержатся данные, позиционирование допустимо (это минус числа, но я пробовал использовать 0 и ту же проблему)

 createImageBitmap(blob, -pos.x + 100, -pos.y + 100, 200, 200).then(data => {
            resolve(data)})

Выходящие данные: <ImageData width: 200, height 200 />

Однако, если затем попытаться преобразовать это в BLOB-объект

const canvas = document.createElement('canvas')
      canvas.height = img.height
      canvas.width = img.width
      const context = canvas.getContext('bitmaprenderer')
      context.transferFromImageBitmap(img)

canvas.toBlob((blob)=> ..

BLOB-объект пуст.

Есть какие-нибудь подсказки, где я ошибаюсь?

Answer 1

Это ошибка Chrome с контекстом bitmaprenderer ...

По какой-либо причине результатом HTMLCanvasElement.toBlob() и HTMLCanvasElement.toDataURL() будут полностью прозрачные изображения ...

Они не учитывают текущий активный растровый буфер, который отображается в HTMLCanvasElement.

Это можно продемонстрировать, добавив холст к документу:

fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
  .then(r => r.blob())
  .then(b=>createImageBitmap(b, 120,120,120,120))
  .then(img => {
    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;
      document.body.append(canvas);
      // transfer on the bitmarenderer context
      canvas.getContext('bitmaprenderer')
        .transferFromImageBitmap(img);
      // get it back as a Blob
      canvas.toBlob(res);
    });
  })
  .then(blob => {
    var img = document.body.appendChild(new Image());
    img.src = URL.createObjectURL(blob);
  });

img {
  border: solid red;
}
canvas {
  border: solid green;
}

Вы можете пометить вопрос , чтобы он получил более высокий приоритет, и на данный момент вы можете захотеть вернуться к 2dContext иего память истощает drawImage () метод ...

fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
  .then(r => r.blob())
  .then(b=>createImageBitmap(b, 120,120,120,120))
  .then(img => {
    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;
      document.body.append(canvas);
      // draw on a 2d context
      canvas.getContext('2d')
        .drawImage(img,0,0);
      // get it back as a Blob
      canvas.toBlob(res);
    });
  })
  .then(blob => {
    var img = document.body.appendChild(new Image());
    img.src = URL.createObjectURL(blob);
  });

img {
  border: solid red;
}
canvas {
  border: solid green;
}