Можно ли сделать снимок экрана iframe на веб-странице?

Question

Я пытаюсь сделать снимок экрана iframe на веб-странице.В моем конкретном случае, в iframe есть Street View одного из магазинов моих клиентов.Насколько я искал и читал, я не нашел никакого решения для этого.

Я знаю, что есть библиотеки JavaScript, такие как Html2Canvas и Canvas2Image, но они не могут захватить iframe.

Здесь - это скрипка, над которой я работаю.

Эти библиотеки работают правильно со всеми элементами HTML, кроме iframe.

Это 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?Существуют ли какие-либо платные сторонние сервисы, которые могут это сделать?

Если с фреймом ничего не получится, есть ли альтернативы для достижения того, что я пытаюсь сделать?

Скажите, пожалуйстаесли требуется дополнительная информация.

Любая помощь будет принята с благодарностью.

Заранее спасибо

Answer 1

Если вы просто хотите сделать скриншот, просто используйте для этого инструмент для подрезки (но я думаю, это не ваш случай).

С точки зрения программирования:

Учтите, что iframe загружает внешнюю страницу на вашем сайте, и вы не можете это контролировать. Загруженный код страницы НЕ является частью вашего исходного кода, и вы практически не контролируете его для расширенного редактирования / возможностей программно.

Как указано здесь , вы можете использовать метод getScreenshot для iframe в FF. Это может сработать для вас, но я думаю, что это может быть полезно для простого сценария и не может рассматриваться как полноценное решение для кроссбраузерной совместимости, используемое в качестве функции.

Answer 2

В Firefox вы можете просто щелкнуть правой кнопкой мыши по iframe и в контекстном меню найти что-то вроде «только показывать этот кадр». Это даст вам только контекст Iframe, и вы сможете легко извлечь скриншот. В противном случае вам просто нужна программа для рисования, чтобы выбрать только то, что вы хотите, например, Snipping Tool.

Answer 3

Вы не можете, потому что это отдельные документы. Единственный способ добиться этого - манипулировать кодом страницы перед печатью, чтобы iframe был больше, но это нужно было делать вручную, поскольку ширина и высота iframe могут быть не единственными элементами страницы, фактически ограничивающими его размер. Например, iframe может быть внутри нескольких других тегов div, которые имеют фиксированные размеры. Вам также необходимо знать высоту и ширину содержимого, отображаемого в iframe, чтобы вы знали, насколько велик размер нового iframe.

Answer 4

Если вам нужно сделать захват программным способом, у вас есть возможность использовать nodejs с puppeteer, который является библиотекой, которая использует хром для имитации веб-браузера.Я привожу вам пример для захвата экрана:

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/