Uncaught (in promise) dom-to-image

Question

I have a page that has multiple canvas html elements. The website is actually built in angularjs and there are charts that are displayed on it which have been created in Qlik. I am trying to get a screenshot of the individual charts which are rendered as canvas elements on the browser.

Using https://github.com/tsayen/dom-to-image, I am able to get the screenshot of just first chart using the following code:

var node = document.getElementById(divToPrint);
    domtoimage.toPng(node)
        .then(function (dataUrl) {
            var link = document.createElement('a');
            link.download = divToPrint + '.png';
            link.href = dataUrl;
            link.click();
        });

However, for all other charts, I get the following error:

Uncaught (in promise) Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}
Promise.then (async)

I found somebody already posted this on github but there is no answer: https://github.com/tsayen/dom-to-image/issues/181

Is there something missing in the code?

Answer 1

You can try this using https://github.com/tsayen/dom-to-image. Below is the simple code for that.

var node = document.getElementById(divToPrint);
domtoimage.toBlob(document.getElementById('node'))
    .then(function (blob) {
        saveAs(blob, 'my-node.png');
    });

But you have to use fileSaver.js for that. You can get it from here https://github.com/eligrey/FileSaver.js/

and import it as import { saveAs } from 'file-saver';. in your project.