createImageBitmap返回空图像 [英] createImageBitmap returns an empty image

问题描述

我正在使用createImageBitmap在工作程序中转换图像.

I'm using createImageBitmap to convert an image in a worker.

blob进入时具有数据，定位有效(它们是负数，但我尝试使用0和相同的问题)

The blob goes in has data, the positioning is valid (they're minus numbers but I've tried using 0 and same issue)

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

输出的数据是<ImageData width: 200, height 200 />

但是什么时候尝试将其转换为blob

However when then try and convert this into a 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为空.

关于我要去哪里的任何线索吗?

Any clues on where I'm going wrong?

推荐答案

这是无论出于何种原因，HTMLCanvasElement.toBlob()和HTMLCanvasElement.toDataURL()的结果将是完全透明的图像...

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

它们不支持HTMLCanvasElement中显示的当前活动位图缓冲区.

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 => {
    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;
}

这篇关于createImageBitmap返回空图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！