[Discovery] Propose a method for capturing an image of the progress report [8h]

[anvmn]

This is basically finding a way to convert html to image. We have a complexity layer here, because HTML is generated by JS, so we need to have JS complete HTML generation before we can proceed with capturing image.

[anvmn]

@adamhstewart

Gave it another thought, and with our APP architecture, we need a JS libraray that can perform scrolling screenshot (as progres report is much larger that single screen to view).

Started with dom-to-image library. Inout is a node we wish to take screenshot of (for full screenshot, it's document.body), clones that nodes DOM, then applies styles, fonts, images, etc... Details here. From this copy, screenshot is created.

The library has little configuration, and at all my attempts, it was always taking a screenshot of single viewport. That is 1024px height, when entire page I was testing on is over 3000px. Had an idea to take screenshots of different parts of report, but decided to check out otheroptions.

So, gave up on dom-to-image, and selected html2canvas. It got same proncipal of operation as dom-to-image but it seemed to be more configurable when it comes to page height. After several attempts, managed to take a screen shot of entire page. We do need to calculate entire page height, and specify it as inputy param, but it's not too hard. Here's demo:

I did see that it fails to emved images, and draw the lines on the chart. If we decide to proceed with this development, will need to look into it.

[anvmn]

Some code fore refferenece:

let page = document.getElementById('page-content');
html2canvas(page,{
  width: 800,
  windowHeight: 3200
}).then(function(canvas) {
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/jpeg");
    a.download = 'myfile.jpeg';
    a.click();
});

let container = document.getElementsByClassName('ui unstackable items');
let children = container[0].childNodes;

let totalHeight = 0;
for (let i = 0; i < children.length; i++) {
  console.log(i + ": " + children[i].clientHeight);
  if (children[i].clientHeight == undefined) {
    continue;
  }

  totalHeight += parseInt(children[i].clientHeight);
}

[anvmn]

I did see that it fails to emved images, and draw the lines on the chart. If we decide to proceed with this development, will need to look into it.

Maybe related problem described at: https://github.com/niklasvh/html2canvas/issues/2882

[anvmn]

This is used already in development. Closing.