Prendre une capture d'écran d'une page contenant un iframe
Nous avons un site Web nodeJS/angular 4 qui affiche une iframe d'un tiers (powerBI Emebdded). Nous essayons de développer une fonctionnalité permettant à l'utilisateur final de prendre une capture d'écran de la page, y compris le contenu de l'iframe.
Nous avons essayé la bibliothèque iframe2image: https://github.com/twolfson/iframe2image
Mais nous sommes confrontés au problème de la même politique d'origine:
ERROR DOMException: Blocked a frame with Origin http://localhost:4200
from accessing a cross-Origin frame
Comme nous n'avons pas accès à l'iframe (c'est un contenu tiers généré par PowerBI iframe avec une bibliothèque dédiée). Nous ne pouvons pas contourner la stratégie en définissant le window.document.domain dans l'iframe sur le même domaine.
Avez-vous une solution à nous proposer?
Je pense que ce n'est absolument pas possible, car il n'y a aucun moyen d'accéder aux éléments du document de l'iframe. Mais l'accès à ces éléments est nécessaire car toutes les bibliothèques qui rendent du HTML à n'importe quelle forme d'image doivent résoudre les éléments à l'intérieur du document pour en retirer les éléments visuels.
Dans Firefox, vous pouvez utiliser le .getScreenshot méthode de l'élément iframe pour obtenir une capture d'écran de son contenu. Voir la documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot
Cela ne fonctionne que dans Firefox, et uniquement dans code chrome , pas sur la page Web elle-même.