时间戳

首页 > 解决方案 > 'bitmaprenderer' 不是 Chrome 中屏幕外画布渲染上下文的有效值吗？

javascript - 'bitmaprenderer' 不是 Chrome 中屏幕外画布渲染上下文的有效值吗？

问题描述

在将位图图像绘制到屏幕外的画布上时，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');

工作人员需要画布上下文，所以我不能使用（屏幕上）画布界面，毕竟没有文档访问。

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

我的Chrome版本是74.0.3729.169，链接文章浏览器兼容性表规定，位图渲染上下文接口从66版本开始可用。

我做错了什么，还是不支持位图渲染器作为屏幕外画布渲染上下文的有效值？如何在 Chrome 中访问屏幕外画布的位图渲染上下文？提前致谢。

标签： javascriptgoogle-chromecanvas

解决方案

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

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

如果您想将其用于将其绘制到其他上下文中，那么您可以直接将 ImageBitmap 传递给2D drawImage或webgltexImage2d。

所以我能看到的唯一用例是使用OffscreenCanvas.convertToBlob()Worker 内部的方法将 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">

推荐阅读