2

I am having an issue with taking screenshots in the Iframe using html2canvas.

Here I am able to take screenshots other than the Iframe element.

I have created an example stackblitz demo here.

Please help me, what I am doing wrong here. What is the other way to take screenshots in Iframe?

Sathiamoorthy
  • 8,831
  • 9
  • 65
  • 77

1 Answers1

1

If you want to screenshot an iframe with a different origin (like in your stackblitz) - it's not possible with html2canvas because of https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy.

Also see their limitations http://html2canvas.hertzen.com/documentation.html#limitations

To get a screenshot from different document you'll need something node.js or any other server-side programming language based, for example puppeteer (got it from this answer)

const puppeteer = require('puppeteer');

async function run() {
    let browser = await puppeteer.launch({ headless: false });
    let page = await browser.newPage();
    await page.goto('https://www.scrapehero.com/');
    await page.screenshot({ path: './image.jpg', type: 'jpeg' });
    await page.close();
    await browser.close();
}

run();

If you want to screenshot an iframe with the same origin - I'm sure it will work with very basic code from their documentation

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});
nickbullock
  • 6,424
  • 9
  • 27
  • 2
    Hi, I had seen this answer already. I don't know how to implement this in angular. If it is possible, can you please implement and share the stackblitz link? Note: I want to take a screenshot from different origin. – Sathiamoorthy Jun 28 '21 at 11:48