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 bug...

无论出于何种原因，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;
}

您可以为the issue 加注星标，使其获得更高的优先级，并且暂时您可能希望回退到 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;
}