CODEWITHSUNDEEP
angulariframescreenshothtml2canvas
Sathiamoorthy
Sathiamoorthy

Reputation: 11552

Unable to take screenshot in Iframe

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?

Upvotes: 2

Views: 1298

Answers (1)

nickbullock
nickbullock

Reputation: 6589

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);
});

Upvotes: 1

Related Questions