（如果链接消失，让我描述一下如何重现问题。在 Google 地图上找到任何一家商店，当您点击该商店时，左侧的商店详细信息中会显示“商店名称图片”。单击该图像以将其扩展到整个视口。)
我找到了<canvas> 元素，我猜它包含图像。我尝试在该画布元素上执行.getContext('2d')，但我一直为空。
【问题讨论】：
标签： html web canvas html5-canvas
如果您在执行getContext("2d") 时收到null，那是因为已经创建了另一种类型的上下文，在本例中是"webgl"。
要将画布转换为新图像，您通常会调用canvas.toBlob()（无论上下文类型如何）。
如果您需要裁剪该画布内容，您可以将其绘制在其他画布上。
但由于他们没有阻止 WebGL 上下文丢弃其绘图缓冲区（通过在 getContext 调用中传递 preserveDrawingBuffer），因此您只能从中获得透明图像。
无论如何，这些方法都不会检索原始图像，但它们会完全创建一个新图像（可能质量较低，尺寸较大）。要检索原始图像，请检查您的开发工具的网络选项卡，或者如果您需要以编程方式执行此操作，请注入一个脚本，该脚本将欺骗所有 fetch、XHR 和 HTMLImageElement 对象以记录其资源 URL。但这会变脏。
【讨论】：
onclick = () => requestAnimationFrame(()=>canvas.toBlob( callback )) 之类的操作设法做到了这一点，但我认为这是侥幸。或者您也可以通过带有@run-at document-start 的用户脚本插入一个脚本，该脚本将覆盖HTMLCanvasElement.prototype.getContext 以始终为webgl 上下文传递preserveDrawingBuffer 选项。