Búsqueda de sitios web

html - Capturar captura de pantalla de la etiqueta object o IFrame

Quiero capturar una captura de pantalla de una etiqueta de objeto (o un iframe) y usarla como miniatura.

HTML

 <div class="resizable" (resized)="onResized($event)" id="modalParent">
     <object id="modal" type="text/html" data="./../assets/modal/index.html"></object>
 </div>

TS

 var doc = document.getElementById('modal');
 saveAsPng(doc);  // Using save-html-as-image library

Intenté usar otras bibliotecas como;

  • html2canvas
  • domtoimage
  • jspdf
  • guardar-html-como-imagen

Pero todas estas bibliotecas devuelven una imagen en blanco.

Esto descarga una imagen en blanco con los siguientes errores;

Error inlining remote css file SecurityError: Failed to read the 'cssRules' 
property from 'CSSStyleSheet': Cannot access rules

Error loading remote stylesheet SecurityError: Failed to read the 'cssRules' 
property from 'CSSStyleSheet': Cannot access rules

Error while reading CSS rules from https://fonts.googleapis.com/css? 
family=Open+Sans:300,400,600,700 SecurityError: Failed to read the 'cssRules' property from 
'CSSStyleSheet': Cannot access rules

Error while reading CSS rules from https://fonts.googleapis.com/css? 
family=Roboto:300,400,500&display=swap SecurityError: Failed to read the 'cssRules' property from 
'CSSStyleSheet': Cannot access rules

Error while reading CSS rules from https://fonts.googleapis.com/icon? 
family=Material+Icons SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': 
Cannot access rules

Estructura

El HTML mostrado arriba es el nivel superior. Se refiere a ../modal/index.html - este archivo index tiene otro iFrame que muestra contenidos que están alojados en AWS S3.

El HTML de nivel superior mostrado arriba está destinado a actuar como una vista previa para el usuario en el front-end.

Espero que esto tenga sentido.

¿Alguien puede explicármelo?

  1. ¿Qué significan exactamente estos errores? ¿Necesito configurar CORS en el bucket de S3 para el intercambio de recursos de origen cruzado?
  2. ¿Hay otra manera de convertir HTML en una imagen que no conozca?