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

Question

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

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

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

0

javascript html iframe screenshot

задан Adnan Toky 28 March 2019 в 02:58

2 ответа

Другие вопросы по тегам:

javascript html iframe screenshot

Похожие вопросы:

score 0 · Answer 1

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

score 0 · Answer 2

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

Для вашей цели лучше всего использовать внешний API или внешний сервис, я думаю, что не стоит пытаться делать это с JS.

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

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

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

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

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});
Вы можете относительно легко адаптировать его к своему коду.

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