Createimagebitmap Returns An Empty Image

I'm using createImageBitmap to convert an image in a worker. The blob goes in has data, the positioning is valid (they're minus numbers but I've tried using 0 and same issue) crea

Solution 1:

This is a Chrome bug with the bitmaprenderer context...

For whatever reason, the result of HTMLCanvasElement.toBlob() and HTMLCanvasElement.toDataURL() will be fully transparent images...

They don't honor the current active bitmap-buffer that is displayed in the HTMLCanvasElement.

This can be demonstrated by appending the canvas to the document:

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 => {
    returnnewPromise(res => {
      // create a canvasconst 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(newImage());
    img.src = URL.createObjectURL(blob);
  });

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

You can star the issue so that it gets higher priority, and for te time being you might want to fallback to a 2dContext and its memory draining drawImage() method...

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 => {
    returnnewPromise(res => {
      // create a canvasconst 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(newImage());
    img.src = URL.createObjectURL(blob);
  });

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