2

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;

  1. What do these errors mean exactly? Do I need to setup CORS on the S3 bucket for cross-origin?
  2. Is there a another way to covert HTML to an image that I am not aware of?
Aleksandar Zoric
  • 1,343
  • 3
  • 18
  • 45
  • 1
    Does this help? https://stackoverflow.com/questions/10721884/render-html-to-an-image – MikeOne Aug 24 '20 at 15:50
  • @MikeOne I did come across this myself. I believe this is the post I came across the other libraries. Looking at phantomJS atm - at first glance earlier it seemed it was for AngularJS. But yeah - thanks for that. – Aleksandar Zoric Aug 24 '20 at 16:07
  • I think the bottom line is, you really cannot do this in the browser. The only option is to use a third party API for it. – MikeOne Aug 24 '20 at 17:10
  • Aye. I was trying to solve this on the front-end but had another look today and thought why can't I do this on the backend using nodejs. So used Puppeteer to get the screenshot and works great! Problem solved. – Aleksandar Zoric Aug 25 '20 at 13:04
  • Excellent! Puppeteer is cool! – MikeOne Aug 25 '20 at 13:05

0 Answers0