Сделайте снимок экрана определенного элемента в DOM, используя captureVisibleTab - PullRequest
0 голосов
/ 21 марта 2019

Добрый день,

Я создал расширение Chrome, которое позволяет моему приложению реагировать на снимок экрана текущей вкладки с помощью передачи сообщений. Итак, обзор того, как это работает, заключается в том, что мое приложение реагирования отправляет сообщение расширению через content_script.js, после чего скрипт контента будет связываться с фоновым скриптом, чтобы сделать снимок экрана. Затем он вернет dataURL в скрипт контента, а затем передаст его моему приложению.

Этот метод работает нормально, но я бы хотел "уточнить" снимок экрана, только возвращая снимок экрана с указанным элементом dom, в данном случае iframe страницы. Есть ли способ сделать скриншот только на этом iframe?

Вот что у меня есть:

(реакция приложения) App.js

componentDidMount() {
    var self = this;
    window.addEventListener("message", function (event) { //listen for messages from react app
        // We only accept messages from ourselves
        if (event.source !== window)
            return;

        if (event.data.type && (event.data.type === "FROM_EXTENSION")) {
            // console.log("React app received message: " + event.data.dialog);
            self.setState({ img: event.data.image, showImageContainer: true })
        }
    });
}

getScreenshotHandler = () => {
  var data = { type: "FROM_PAGE", text: "Screenshot Request" };
        window.postMessage(data, "*");

    }

componentWillUnmount() {
    window.removeEventListener("message");
}

(расширение Chrome) content_script.js

window.addEventListener("message", function (event) { //listen for messages from react app
    if (event.source != window)
        return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        //send message to background.js
        chrome.runtime.sendMessage({ type: "screenshot" }, function (response) {
            let data = { type: "FROM_EXTENSION", image: response.farewell, dialog: "いくつかの日本のもの" }
            window.postMessage(data, "*");
        });
    }
});

(расширение хром) background.js

chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
    let imageURL = null

    chrome.tabs.captureVisibleTab(null, { format: "png" }, function (image) {//get screenshot of tab
      sendResponse({ farewell: image });
    });
    console.log(imageURL);

    return true;
  });

Любая помощь будет оценена. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...