javascript - JS Canvas getContext然后transferControlToOffscreen

Question

工作代码:

var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();

当使用 .getContext() 时:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var offscreen = canvas.transferControlToOffscreen();
// InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

进一步的尝试也不起作用:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
delete ctx;
var offscreen = canvas.transferControlToOffscreen();

或者即便如此:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.reset();
delete ctx;
var offscreen = canvas.transferControlToOffscreen();

webgl 而不是 2d

没有任何变化

那么，我怎样才能得到画有东西的 Canvas 的屏幕外，然后将它发送给工作人员？还是我必须使用类似 getImageData() 的方法并将结果发送到全新 Canvas 的屏幕外，然后让工作人员使用 putImageData() 进行复制？我不想进行这些额外的操作(因为会运行得更慢)。

另一种方法是使用 cloneNode()，但不会复制 Canvas 图像。

我查看了 canvas 和 context 的所有方法，但似乎无法解决问题。

我正在使用启用了离屏功能的 FF 67。我想在 Chrome 中没有区别。

Answer 1

很简单:您无法从具有渲染上下文的 Canvas 转移控制权。

但是你可以:

const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');

这和做是一样的:

var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();
var ctx = offscreen.getContext('2d');

在所有你transferToImageBitmap的结尾:

var bitmap = offscreen.transferToImageBitmap();

希望这对您有所帮助!