Take screenshot of a page containing an iframe

We have a nodeJS/angular 4 website which is displaying an iframe from a third party (powerBI Emebdded). We are trying to get develop a feature allowing the end user to take a screenshot of the page including the content of the iframe.

We tried the iframe2image library: https://github.com/twolfson/iframe2image

But we are facing the issue of the same origin policy:

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

As we have no access to the iframe (it's a third party content generated by PowerBI iframe with a dedicated library). We can not bypass the policy by setting the window.document.domain in the iframe to the same domain.

Do you have a solution to suggest us?

Answers:

Answer

I think this is absolutely not possible, because there is no way to access the elements of the iframe's document. But access to this elements is necessary because all libraries which are rendering html to any form of image need to resolve the Elements inside the document to get the visuals out of it.

Answer

In Firefox, you can use the .getScreenshot method of the iframe element to get a screenshot of it's contents. See the documentation:

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

This only works in Firefox, and only in chrome code, not on the web page itself.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.