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

12,982

Solution 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/

Solution 2

If you just want to take a screenshot, just use a snipping tool for that (but I guess this is not your case).

From a programming perspective:

Consider that the iframe loads an external page within your website and you do not have control on this. The loaded page code is NOT part of your source code, and little to no control you have over it for extensive editing/capabilities, programmatically.

As stated here, you can use the getScreenshot method of the iframe in FF. This might work for you, but I guess this could be useful for a simple scenario and could not be considered as a full, cross-browser compartibility solution used as a feature.

Solution 3

You can't, because they are seperate documents. The only way to achieve that would be to manipulate the page's code before printing so that the iframe was bigger, but this would have to be done by hand since the iframe's width and height may not be the only page elements actually limiting it's sizing. For example the iframe could be inside several other div tags that have fixed sizes. You'd also need to know the height and width of the content being shown in the iframe so you'd know how big to make the iframe's new size.

Solution 4

There is a solution, when you use html2canvas, the input variable must be an HTMLElement, then it will create the screenshot. It is supported by old browsers too (like IE9), check the documentation: https://html2canvas.hertzen.com/documentation.html

import html2canvas from 'html2canvas';

screenShot() {
  const iframe = document.getElementsByTagName('iframe');
  const screen = iframe[0]?.contentDocument?.body;

  html2canvas(screen)
    .then((canvas) => {
      const base64image = canvas.toDataURL('image/png');

     // Do something with the image
  });
}

Solution 5

In a browser and using the same method ugyanakkor explained, dom-to-image-more now supports same origin and blob iframe support (implemented by me). It may not have been put to an npm registry though; if that, then add dom-to-image-more.js to your codes.

Share:
12,982
Admin
Author by

Admin

Updated on July 13, 2022

Comments

  • Admin
    Admin over 1 year

    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