Passing document body without editing it in a web worker

Question

I am using the html2canvas javascript library to take a screenshot of the body multiple times every second, but it's slowing down the browser session considerably. The library function basically takes in a DOM element, loops through it and reproduces it as a canvas element. I want to pass the document body every time to a web worker, where it will separately execute the function. I understand that workers have no access to the DOM, but is there any way I can maybe serialize the body to successfully pass it as a postMessage argument?

You could send the body as plain HTML text. But the problem is workers also do not have access to canvas element and it's drawing methods. AFAIK, html2canvas library uses SVG that is drawn on canvas. — Tomáš Zato - Reinstate Monica
Did you solve the issue? Did you manage to use html2canvas with web worker? — Mo Sadeghipour

Michal Charemza Michal Charemza · Accepted Answer · 2016-06-20T12:51:11

is there any way I can maybe serialize the body to successfully pass it as a postMessage argument?

Yes, using (for example) outerHTML

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

and in worker.js

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

Which can be seen at https://plnkr.co/edit/M0OoIEiarr0HsOiSANUs?p=preview

However, as Tomáš Zato points out, html2canvas might not work in a web worker.

Passing document body without editing it in a web worker

1 Answers