web-dev-qa-db-ja.com

iframeを含むページのスクリーンショットを撮る

サードパーティ（powerBI Emebdded）からのiframeを表示するnodeJS/angular 4 Webサイトがあります。エンドユーザーがiframeのコンテンツを含むページのスクリーンショットを撮れるようにする機能を開発しようとしています。

私たちはiframe2imageライブラリを試しました： https://github.com/twolfson/iframe2image

しかし、同じOriginポリシーの問題に直面しています。

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

Iframeにアクセスできないため（これは、専用ライブラリを備えたPowerBI iframeによって生成されたサードパーティのコンテンツです）。 iframeのwindow.document.domainを同じドメインに設定してポリシーをバイパスすることはできません。

私たちを提案する解決策はありますか？

javascripthtmlnode.jsangulardom
8
romain-nio

Iframeのドキュメントの要素にアクセスする方法がないため、これは絶対に不可能だと思います。ただし、htmlを任意の形式の画像にレンダリングしているすべてのライブラリは、ビジュアルを取得するためにドキュメント内の要素を解決する必要があるため、この要素へのアクセスが必要です。

3
Sandro Schaurer

Firefoxでは、.getScreenshot iframe要素のメソッドを使用して、そのコンテンツのスクリーンショットを取得します。ドキュメントを参照してください：

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

これはFirefoxでのみ機能し、Webページ自体ではなく chrome code でのみ機能します。

2
Eugene Mihaylin