JS canvas getContext 然后传输ControlToOffscreen

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

那么，我怎样才能得到画有东西的画布的屏幕外，然后将其发送给工作人员呢？或者我必须使用类似的东西getImageData()并将结果与​​全新画布的屏幕外一起发送，然后让工作人员复制putImageData()？我不想进行这些额外的操作（因为会运行得更慢）。

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

我已经查看了画布和上下文的所有方法，但似乎没有任何方法可以解决问题。

我使用的是启用了离屏功能的 FF 67。我认为 Chrome 中没有区别。

Answer 1

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

但是你可以：

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();

希望这可以帮助！