我正在尝试截取使用 webgl2 的画布的内容。 它来自我没有自己构建的网站上的游戏。
我可以使用某些控制台命令获取屏幕截图，但前提是游戏窗口不可见，否则它只是黑屏。
据我了解，这与在填充画布的渲染函数之后清除绘图缓冲区有关。
我目前正在尝试在调用渲染函数之后立即添加我的屏幕截图命令，希望此时缓冲区不会被清除。
但是这段代码在一个用 webpack 编译的大文件中，我不确定我是否/如何从控制台引用该函数。
他们似乎使用 PIXI 进行渲染。
关于如何覆盖调用渲染函数的部分的任何提示，以便我可以在那里添加我的屏幕截图代码？ 否则如何获取屏幕截图？
【问题讨论】：
标签： javascript html5-canvas screenshot webgl2
您可以采用几种不同的方法来尝试捕获带有 WebGL2 内容的画布屏幕截图：
一种选择是尝试找到在编译代码中调用的特定渲染函数，然后使用您自己的自定义渲染函数覆盖它，其中包括对屏幕截图代码的调用。这可能有点棘手，特别是如果代码被大量缩小和混淆，但可以通过在编译代码中搜索“render”或“PIXI”等关键字来找到渲染函数。
另一种方法是尝试拦截正在对画布进行的 WebGL2 调用并捕获此时画布的当前状态。您可以使用浏览器开发人员控制台中的 WebGL2 调试工具来尝试执行此操作。
另一种方法是使用浏览器扩展，如“WebGL Inspector”或“WebGL2 Extension Viewer”，它们可以让您拦截 webgl 调用并访问画布数据。
如果你能接触到源代码，你可以尝试在调用render函数后添加一个函数调用来截取屏幕截图。
如果以上方法都不奏效，您可以尝试使用浏览器自动化工具，如 Selenium 或 Puppeteer 与网站进行交互，并在适当的时候截屏。
请记住，根据游戏的不同，可能存在阻止您捕获画布内容的安全限制，在这种情况下，您可能需要寻找替代解决方案。
【讨论】：