Screenshot on big pages

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 =)

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.

tsayen / dom-to-image

Screenshot on big pages #79