传递文档正文而不在网络工作者中编辑它

【问题标题】：Passing document body without editing it in a web worker传递文档正文而不在网络工作者中编辑它
【发布时间】：2016-06-20 07:32:46
【问题描述】：

我正在使用 html2canvas javascript 库每秒多次截取正文，但这会大大减慢浏览器会话速度。库函数基本上接受一个 DOM 元素，循环遍历它并将其复制为画布元素。我想每次都将文档正文传递给网络工作者，在那里它将单独执行该功能。我知道工作人员无法访问 DOM，但有什么办法可以序列化正文以成功将其作为 postMessage 参数传递？

【问题讨论】：

您可以将正文作为纯 HTML 文本发送。但问题是工人也无法访问画布元素及其绘图方法。 AFAIK，html2canvas 库使用在画布上绘制的 SVG。
问题解决了吗？您是否设法将 html2canvas 与网络工作者一起使用？
@MohammadSadeghipour 不幸的是，我没有。

标签： javascript web-worker html2canvas

【解决方案1】：

有什么办法可以序列化正文以成功地将其作为 postMessage 参数传递？

是的，使用（例如）outerHTML

var worker = new Worker("worker.js");
document.addEventListener("DOMContentLoaded", function(event) {
  worker.postMessage(document.body.outerHTML);
});

在worker.js

self.onmessage = function(e) {
  console.log('In worker', e.data);
};

可以在https://plnkr.co/edit/M0OoIEiarr0HsOiSANUs?p=preview看到

然而，正如 Tomáš Zato 指出的那样，html2canvas 可能不适用于 web worker。

【讨论】：

是否可以序列化 DOM？整个内容，包括 html、内联 css、文档内脚本 + 添加到页面的任何脚本/链接？
您可以序列化 DOM，但不能序列化 DOM 方法和您添加的任何函数。由于 html2canvas 严重依赖于 canvas 方法，所以它不会（轻松地）工作。