时间戳

首页 > 解决方案 > 是否可以在网页中截取 iframe 的屏幕截图？

javascript - 是否可以在网页中截取 iframe 的屏幕截图？

问题描述

我正在尝试截取网页中 iframe 的屏幕截图。在我的特定情况下，iframe 包含我的一个客户商店的街景。据我搜索和阅读，我没有找到任何解决方案。

我知道有类似Html2Canvasand的 JavaScript 库Canvas2Image，但它们无法捕获 iframe。

这是我正在研究的小提琴。

这些库可以与除 iframe 之外的每个 HTML 元素一起正常工作。

这是小提琴的 JavaScript：

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

是否存在其他捕获 iframe 的方法？是否有任何付费第三方服务可以做到这一点？

如果 iframe 无法使用，是否有任何替代方法可以实现我想要做的事情？

请告诉我是否需要更多信息。

任何帮助将不胜感激。

提前致谢

标签： javascripthtmliframescreenshothtml2canvas

解决方案

如果您需要以编程方式进行捕获，您可以选择将 nodejs 与 puppeteer 一起使用，puppeteer 是一个使用 chromium 来模拟 Web 浏览器的库。我给你一个例子来捕捉屏幕：

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

这是我从中获得它的来源： https ://www.scrapehero.com/how-to-take-screenshots-of-a-web-page-using-puppeteer/

推荐阅读