I want to capture a screenshot of an object tag (or an iframe) and use it as a thumbnail.
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
I tried using other libraries such as;
- html2canvas
- domtoimage
- jspdf
- save-html-as-image
But all of these libraries return a blank image.
This downloads a blank image with the following errors;
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
Structure
The HTML shown above is the top level. It refers to ../modal/index.html - this index file has another iFrame which displays contents that are hosted on AWS S3.
The top level HTML shown above is to act as a preview for the user on the front end.
Hope this makes sense.
Can somebody explain to me;
- What do these errors mean exactly? Do I need to setup CORS on the S3 bucket for cross-origin?
- Is there a another way to covert HTML to an image that I am not aware of?