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?
