Question

在将位图图像绘制到屏幕外画布上时，Chrome控制台向我抛出错误：

无法在“ OffscreenCanvas”上执行“ getContext”：提供的值“ bitmaprenderer”不是类型为OffscreenRenderingContextType的有效枚举值。

该问题同时出现在工作程序和窗口上下文中：

var img = new Image(63, 177);
img.src = "https://cdn.sstatic.net/Img/unified/sprites.svg";
img.onload = _ => {
	createImageBitmap(img).then(bitmap => {
		var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
		canvas.getContext('bitmaprenderer');
	}).catch(e => console.error(e.message));
};

我可以这样使用（屏幕上的）画布界面在窗口上下文中获取此画布上下文类型：

document.createElement('canvas').getContext('bitmaprenderer');

worker需要画布上下文，所以我不能使用（屏幕上的）画布界面，毕竟没有文档访问权限。

虽然我可以通过在getContext方法中使用“ 2d”标识符来获取位图图像的二维渲染上下文，但它将是OffscreenCanvasRenderingContext2D而不是ImageBitmapRenderingContext。我不知道两个接口在延迟方面的区别，但是据我了解，位图可以立即转移到画布上，而应该绘制2d上下文。

我的Chrome版本为74.0.3729.169，并且linked article浏览器兼容性表规定，位图呈现上下文界面可从66版本开始使用。

我是在做错什么，还是到目前为止，不支持将bitmaprenderer作为屏幕外画布渲染上下文的有效值？如何在Chrome中访问屏幕外画布的位图渲染上下文？预先感谢。

Answer 1

是的，ImageBitmapRenderingContext仍无法从OffscreenCanvas中获得，只有webgl [-2]（在FF和Chrome中）和2D（当前仅在Chrome中）可用。

请注意，从OffscreenCanvas提供此ImageBitmapRenderingContext几乎没有意义，因为该上下文通常仅用于显示 ImageBitmap对象。因此，这意味着关联的画布应该是可见的。

如果您想将其用于将其绘制到其他上下文之类的事情，则可以将ImageBitmap直接传递给2D drawImage或webgl texImage2d。

因此，我能看到的唯一用例是在Worker内部使用OffscreenCanvas.convertToBlob()方法，以便将ImageBitmap转换为BLob。我可以理解，开发人员确实将其设置为低优先级，但是无论如何您都可以通过其他方式进行相同的设置（即使它可能会使用更多的内存来实现它）。

还要注意，在您的情况下，由于您位于主线程中而不是在Worker中，因此您完全不需要OffscreenCanvas即可进行操作

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/Fiore_con_petali_arancioni_SVG.svg";
img.onload = _ => {
  createImageBitmap(img)
    .then(bitmap => {
      const canvas = Object.assign(document.createElement('canvas'), {
        width: bitmap.width,
        height: bitmap.height
      });
      const ctx = canvas.getContext('bitmaprenderer');
      ctx.transferFromImageBitmap(bitmap);
      return new Promise((res, rej) => {
        canvas.toBlob(blob => {
          if (!blob) rej('error');
          res(blob);
        });
      });
    })
    .then(blob => {
      console.log(blob);
      result.src = URL.createObjectURL(blob);
    })
    .catch(e => console.error(e.message));
};

PNG: <img id="result">

对于Chrome中的屏幕外画布渲染上下文，“ bitmaprenderer”不是有效值吗？

1 个答案: