Screenshot on big pages

[thfontaine]

Hey,
I have a question about your library.
I used html2canvas, but this lib seems to not be supported anymore, and your lib is giving much better results.
I have a little problem with your lib, but i can't provide a jsfiddle, because i can't neither reproduce this issue on all my pages. I use an ERP called dolibarr and on few pages, i can't generate a screenshot, while i have no issues on the remaining pages. I have to precise that i make screenshot of the entire body, and when i make screenshot of a some child nodes of the body, i don't have any issues.
So my question is : Is there an issue with big pages ? The front page of dolibarr is filled with a lot of informations, and when i debug your script, i can get an URI of 5.3MB (in the newUtil.makeImage() line 425)

I'm adding you the file with the uri.
uri.txt

The piece of code i use (based on your doc) :

      var filterFn = function(node) {
       return !(node.className && new RegExp("(^|\\s)nanoModalOverride(\\s|$)").test(node.className))
             && node.id !== '_openWeaselModalButton_';
      };

      domToImage.toPng(document.body, {filter: filterFn, bgcolor: '#ffffff'})
      .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.png';
        link.href = dataUrl;
        link.click();
        loader.classList.add("hidden");
        overlay.classList.remove("_weasel_overlayLoader");
      })
      .catch(function (error) {
        console.log(error);
        loader.classList.add("hidden");
        overlay.classList.remove("_weasel_overlayLoader");
      });

Thank you in advance for your answer =)

[Raven-T]

I had a similar problem with loading an img HTML tag. The problem was that the Image itself takes longer to generate then the actual DOM element. I fixed the problem after many tries with a Timeout before executing the domtoimage.toPng function.

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import domtoimage from 'dom-to-image-chrome-fix'; //Use your normal dom to image import

export class EndpageComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
setTimeout(() => {
var node = document.getElementById('capture');

domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});

}, 100);
}

Just give setTimeout a try.