拍摄包含iframe的页面的屏幕截图

Question

我们有一个nodeJS / angular 4网站，该网站显示来自第三方的iframe（powerBI Emebdded）。我们正在尝试开发一项功能，以允许最终用户对页面进行截图，包括iframe的内容。

我们尝试了iframe2image库：     https://github.com/twolfson/iframe2image

但是我们面临着相同原产地政策的问题：

ERROR DOMException: Blocked a frame with origin http://localhost:4200
from accessing a cross-origin frame

由于我们无权访问iframe（这是PowerBI iframe生成的带有专用库的第三方内容）。 我们无法通过将iframe中的window.document.domain设置为相同的域来绕过该策略。

您有建议我们的解决方案吗？

Answer 1

我认为这是绝对不可能的，因为无法访问iframe文档的元素。 但是必须访问此元素，因为所有将html呈现为任何形式的图像的库都需要解析文档中的Elements才能获得视觉效果。

Answer 2

在Firefox中，您可以使用iframe元素的.getScreenshot方法来获取其内容的屏幕截图。请参阅文档：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot

这仅适用于Firefox，并且仅适用于chrome code，不适用于网页本身。