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