javascript - 'bitmaprenderer' 不是 Chrome 中离屏 Canvas 渲染上下文的有效值吗？

Question

在将位图图像绘制到离屏 Canvas 上时，Chrome 控制台向我抛出错误:

Failed to execute 'getContext' on 'OffscreenCanvas': The provided value 'bitmaprenderer' is not a valid enum value of type 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));
};

我可以在使用(屏幕上) Canvas 界面时在窗口上下文中获取此 Canvas 上下文类型，如下所示:

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

worker 中需要 Canvas 上下文，因此我无法使用(屏幕上) Canvas 界面，毕竟没有文档访问权限。

虽然我可以通过在 getContext 方法中使用“2d”标识符来获取位图图像的二维渲染上下文，但它将是 OffscreenCanvasRenderingContext2D 而不是 ImageBitmapRenderingContext 。我不知道这两个接口(interface)的延迟差异，但据我了解，位图可以立即传输到 Canvas 上，而 2d 上下文应该被绘制。

我的 Chrome 版本是 74.0.3729.169，linked article浏览器兼容性表规定，从66版本开始提供位图渲染上下文接口(interface)。

我是否做错了什么，或者到目前为止，bitmaprenderer 不支持作为离屏 Canvas 渲染上下文的有效值？如何在 Chrome 中访问离屏 Canvas 的位图渲染上下文？提前致谢。

Answer 1

是的，当时提出这个问题ImageBitmapRenderingContext仍然无法从 OffscreenCanvas 获得，现在可以了 Chrome has a bug这会阻止它渲染到占位符 Canvas 。

请注意，如果您想使用此位图渲染器来将其绘制到另一个上下文，那么您可以直接将 ImageBitmap 传递给 2D drawImage或webgl texImage2d .

另请注意，在您的情况下，由于您位于主线程而不是 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">