Is it possible to to take a screenshot of an iframe in a web page?

Question

I'm trying to take a screenshot of an iframe in a webpage. In my particular case, the iframe contains the Street View of one of my clients' store. As far as I've searched and read, I didn't find any solution to this.

I know there are JavaScript libraries like Html2Canvas and Canvas2Image, but they are not able to capture an iframe.

Here is the fiddle I'm working on that.

These libraries are working properly with every HTML element, except the iframe.

This is the JavaScript of the fiddle:

$(function() { 
        $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

Does any other way to capture an iframe exist? Are there any paid third-party services that can do this?

If nothing will work with an iframe, are there any alternatives to achieve what I'm trying to do?

Please tell me if more informations are needed.

Any help will be greatly appreciated.

Thanks in advance

Answer 1

If you need to do the capture in a programmed way, you have the option of using nodejs with puppeteer which is a library that uses chromium to simulate a web browser. I give you an example to capture the screen:

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

Here is the source where I got it from: https://www.scrapehero.com/how-to-take-screenshots-of-a-web-page-using-puppeteer/