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?

Solution 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.

Solution 2

I was also facing the same issue.Please make sure div is applied to div and not to svg, g or any other tag.If your node is written in ts file, then i would recommend trying placing the node in html file.

Comments

[Zunino]

I've never used that library, but it seems you're supposed to use the dataUrl as the src of an image element. It is a "data:" URL, i.e. it is an encoding of the actual bytes that make up the image. I'm drawing this conclusion from looking at the sample on the project's page.

[Shanky]

This will allow the user to download the image. Example on the projects's page is for JPEG image and I am using it to save as PNG image: Save and download a compressed JPEG image: domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; link.href = dataUrl; link.click(); });

[Shanky]

stackoverflow.com/questions/48926412/… - It might be related but I am not familiar with the Promise object.

[Bergi]

Given the github issue is closed, did you ask how they solved it?

[EldadT]

are u using qlikview or qliksense?