如何将一个网页上的画布复制到另一个网页

Question

我正在尝试从网页获取画布并将其显示在其他地方。 画布本身无法通过 URL 获取，我获取网页并从那里抓取画布。

话虽如此，当尝试在其他地方显示相同的画布时，它是空白的。 我知道画布的行为与其他 HTML 元素不同，但是我无法弄清楚如何实现我想要做的事情（如果可能的话）。

我正在做一个chrome扩展，相关代码如下。

服务工作者：

chrome.runtime.onMessage.addListener(function(url, _sender, onSuccess) {
    fetch(url)
    .then(response => response.text())
    .then(responseText => onSuccess(responseText))

    return true;
});

脚本：

await chrome.runtime.sendMessage(url, response => {
    const responseParsed = domParser.parseFromString(response, 'text/html');

    const graphContainer = responseParsed.getElementsByClassName("chart-container")[0];
    if (graphContainer == undefined) throw Error("Failed to get the graph container");

    parentContainer.insertBefore(graphContainer, parentContainer.childNodes[1])
});

什么有效：

• 我获得了完整的网页，并且能够获得图表容器元素。

什么不：

• 将相同的图表插入到我的其他网页时，该图表是空的。

Answer 1

canvas 元素的内容由页面中的代码动态设置。

它不存在于页面的 HTML 标记中，发布的代码通过

domParser

获取并传递该标记。

您需要访问页面的实时 DOM 才能获取未受污染的画布内容。但是，如果画布被污染，您将无法读取其内容。