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

nuypyhwy 于 2023-04-27 发布在 Go

关注(0)|答案(1)|浏览(252)

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

我可以在窗口上下文中获得这个canvas上下文类型，同时使用（屏幕上）canvas界面，如下所示：

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

在worker中需要canvas上下文，所以我不能使用（屏幕上）canvas界面，毕竟没有文档访问。
虽然我可以在getContext方法中使用'2d'标识符来获取位图图像的二维渲染上下文，但它将是OffscreenCanvasRenderingContext2D而不是ImageBitmapRenderingContext。我不知道两个接口的延迟差异，但据我所知，位图可以立即传输到画布上，而2d上下文应该绘制。
我的Chrome版本是74.0.3729.169，linked article浏览器兼容表规定，位图渲染上下文接口从66版本开始可用。
是我做错了什么，还是bitmaprenderer目前不支持作为屏幕外画布渲染上下文的有效值？如何在Chrome中访问屏幕外画布的位图渲染上下文？提前感谢。

google-chrome

来源：https://stackoverflow.com/questions/56367196/is-bitmaprenderer-not-a-valid-value-for-off-screen-canvas-rendering-context-in

1条答案

按热度按时间

dy1byipe1#

是的，在这个问题被问到的时候，ImageBitmapRenderingContext仍然不能从OffscreenCanvas中获得，现在它只是Chrome has a bug，这阻止了它渲染到占位符画布。
请注意，如果您想使用这个位图渲染器，例如能够将其绘制到另一个上下文，那么您可以直接将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">

赞(0）回复(0）举报 2023-04-27

我来回答

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

1条答案

相关问题

热门标签

最新问答