是否可以在网页中截取 iframe 的屏幕截图? [英] Is it possible to to take a screenshot of an iframe in a web page?

问题描述

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

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.

我知道有像 Html2Canvas 和 Canvas2Image 这样的 JavaScript 库，但它们无法捕获 iframe.

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

这里是我正在做的小提琴.

这些库与每个 HTML 元素都能正常工作，iframe 除外.

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

这是小提琴的 JavaScript:

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

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

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

如果 iframe 不起作用，是否有其他替代方法可以实现我想要做的事情?

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.

任何帮助将不胜感激.

提前致谢

推荐答案

如果您需要以编程方式进行捕获，您可以选择将 nodejs 与 puppeteer 一起使用，puppeteer 是一个使用chromium 模拟网络浏览器的库.我举个例子来截屏:

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

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

这篇关于是否可以在网页中截取 iframe 的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！