小编SDS*_*ter的帖子

我在使用 Chrome（当前）时遇到了意外问题。我有一个 Web 应用程序，它使用 webGL 画布进行一些基本的图像处理，然后将 webGL 画布复制到 2d 画布以保存图像数据。问题是，在我切换选项卡后，webgl 画布的绘图上下文似乎在 Chrome 中丢失了。在我尝试过的任何其他浏览器（FF、IE 11/Edge、Safari）中都不会发生这种情况。

如果确实发生了这种情况，我希望 Chrome 也会触发 webgl 上下文丢失事件，但我从未收到该事件。

这是一个非常简单的小提琴来演示这个问题。

https://jsfiddle.net/JoeBlow/m14evgzj/

1) 加载绘制到 webgl 画布的页面

2）切换到新标签页

3）切换回原来的标签

4) 单击“复制图像”。

如果我重新初始化 3d 画布（重新加载所有内容并重新绘制），那么即使在选项卡切换后一切都会按预期工作，但我试图避免捕获窗口/视口上的模糊/焦点事件。

这是简化的代码：

window.canvasSource  = document.getElementById("source");
var canvasDestination = document.getElementById("destination");
var buttonCopy = document.getElementById("btnCopy");
var btnToggle = document.getElementById("btnToggle");
var btnClear = document.getElementById("btnClear");
var btnInit3d = document.getElementById('btnInit3d');

var canvasOptions = { preserveDrawingBuffer: true };

//var sourceContext = canvasSource.getContext("2d", options);
var destinationContext = canvasDestination.getContext("2d", canvasOptions);

window.canvasSource.addEventListener("webglcontextlost", function(event) {
console.log('context lost');
    event.preventDefault();
}, …