Как захватить iframe как изображение

Question

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

Answer 1

Веб-страницы не являются лучшими вещами для «скриншотов» из-за их природы;они могут включать в себя асинхронные элементы, фреймы или что-то в этом роде, они обычно бывают адаптивными и т. д.попробуйте сделать это с JS.

Вы должны попробовать url2png

или использовать html canvas для этого

Посмотрите на проект html2canvas.Их подход заключается в том, что они создают представление страницы внутри холста.Они не делают реальный скриншот, а строят его на основе содержимого страницы и загруженной таблицы стилей.Он может быть использован для всего тела или только для определенного элемента.

Он также очень прост в использовании.Вот пример:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Вы можете относительно легко адаптировать его к своему коду.

Взгляните на их демонстрацию.Нажмите на любую из кнопок и затем прокрутите вниз страницы.

Answer 2

Чтобы иметь возможность использовать html2canvas в вашем iframe, вам может понадобиться внедрить его, а затем выполнить изнутри контекста iframe. Следующее может помочь вам достичь этого: Внедрение функции JavaScript в Iframe